How to do routing in vue

Vue.js is a popular front-end framework for building single-page web applications. Vue provides many convenient tools and plugins, one of which is Vue Router for managing the routing of your application. This article will introduce how to use Vue Router to create a basic routing system.

1. Installing Vue Router

To use Vue Router, you first need to install it. You can use npm or yarn to install.

Use npm:

npm install vue-router 

Use yarn:

yarn add vue-router 

After the installation is complete, we need to introduce Vue Router.

import VueRouter from 'vue-router';

2. Create Vue Router instance

After installing Vue Router, we need to create a Vue Router instance, which will instantiate Vue Router and define routes. In Vue.js, components are usually created and managed using Vue instances. Before creating a Vue Router instance, be sure to create a Vue instance first.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由信息定义
  ]
});

In the above code, we create a router instance and define the routing information of the website in the routes option. In Vue Router, routing information consists of a set of routing objects. Each route object defines the route path and the page component corresponding to the route.

3. Create routing table

The routes attribute defined in the router instance is used to store routing information for the entire application. In this attribute, we define a routing rule, specifying a URL path and the corresponding view component.

import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

In the above code, we define two routing rules: / and /about, which are mapped to the HomePage and AboutPage components respectively.

4. Register routing table

By calling the instantiation method of Vue Router, we can register the routing table to the Vue application. This can be achieved by calling the Vue.use() method on the Vue Router instance.

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

In the above code, we register the Vue Router on the Vue instance and instantiate it. Next, we pass the Vue Router instance to the root Vue instance.

5. Create routing link

In Vue Router, we can use the routing link (router-link) component to implement page navigation. The router-link component actually generates an a tag and automatically binds routing information.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

In the above code, we use two router-link components to navigate to the homepage and about page. The router-link tag should be wrapped in the element that needs to be linked.

6. Create routing view

Vue Router provides a component called router-view for rendering views based on the current route.

<router-view/>

In the above code, we use a router-view tag to display the matching component of the current URL at the appropriate location.

7. Handling route events

In Vue Router, we can handle events when route navigation is triggered. This can be done by listening to events on the Vue Router instance.

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  // 在路由开始跳转前，进行路由守卫
});

router.afterEach(() => {
  // 跳转完成后
});

In the above code, we use the beforeEach() and afterEach() methods to listen for routing events. In the beforeEach() method, we can perform routing guards, such as requesting user login or verifying user permissions. In the afterEach() method, we can perform operations after the page jump.

Summary

This article explains how to use Vue Router to create routes in a Vue.js application. We installed Vue Router and created a Vue Router instance, and defined the routing table. We also covered how to create route links and route views in a Vue.js application, and how to handle route events. By using Vue Router, we can easily build a complete single-page web application.

The above is the detailed content of How to do routing in vue. For more information, please follow other related articles on the PHP Chinese website!