Vue2.0 Vue-Router usage and precautions

Vue-Router is the routing management library officially recommended by Vue.js. It has been fully upgraded and optimized in Vue.js 2.0 version, making it easier to use and more efficient. Vue-Router is very convenient to use, but there are some issues that need to be paid attention to during use. This article will introduce the usage and precautions of Vue-Router to help developers better use Vue-Router.

1. Basic use of Vue-Router

Vue-Router is a plug-in based on Vue.js, which needs to be installed and introduced before use. You can use npm to install Vue-Router directly:

npm install vue-router

After the installation is complete, introduce Vue-Router into the Vue application:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.use(VueRouter) will register a global router instance.

Configure the router in the Vue instance:

import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

VueRouter is essentially an instance object of Vue, used to manage Vue routing. In the above code, we created a VueRouter instance and passed in a routing configuration array (routes). The routing configuration array contains components corresponding to different routes of the application.

Add router-link and router-view in the template:

<div id="app">
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>

In VueRouter, you need to use the router-link component when jumping routes, and you need to use the router-view component to display the current routing component. .

2. Dynamic routing and nested routing

Vue-Router supports dynamic routing and nested routing, which can be configured according to different needs.

1. Dynamic routing

Dynamic routing refers to routing matching based on variables when routing, for example:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

In this example, /:id represents a Matching parameters can match different routes such as /user/1, /user/2, etc., and pass the parameters to the matching components.

2. Nested routing

Nested routing refers to embedding a route within a route, for example:

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,
      children: [
        { path: '', component: UserHome },
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

In this example, use the children option to define In a nested routing structure, the definition of the sub-route is similar to the definition of the parent route, but the path of the sub-route needs to be added after the path of its parent route.

3. Routing hook functions

Vue-Router provides some routing hook functions that can perform some operations when routing jumps.

1.beforeEach

Hook function executed before routing jump, can be used for permission control and jump interception, etc.

router.beforeEach((to, from, next) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
  // 如果需要跳转，必须调用next()。
  next()
})

2.afterEach

The hook function executed after the route jump can be used for operations after the route jump.

router.afterEach((to, from) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
})

4. Notes

1. You need to use the router-link component when routing. Do not use the a tag.

2. If you need to pass parameters when routing jumps, you can use routing parameters or query parameters. The variable name corresponding to the routing parameter needs to be defined using a colon (:) in the routing definition.

3. When jumping, you can set some metadata in the meta attribute of the route object, which can be used in the routing hook function.

4. If you use HTML5 history mode, you need to configure and match routes on the server side. If not configured, a 404 error page will be returned when refreshing.

5. Summary

Vue-Router is an important plug-in for Vue.js, which can easily manage and control the routing of Vue.js applications. This article introduces the basic usage and precautions of Vue-Router. I hope readers can better master the use and application of Vue-Router.

The above is the detailed content of Vue2.0 Vue-Router usage and precautions. For more information, please follow other related articles on the PHP Chinese website!