Reference: the vue – the router’s official website: router.vuejs.org/zh/guide/ad…

Vue. Use (VueRouter) // 1. Define (routing) components. // Import const Foo = {template:'<div>foo</div>' }
const Bar = { template: '<div>bar</div>'} // 2. Define routes // Each route should map a component. Among them"component"It can be a component constructor created by // vue.extend (), // or just a component configuration object. // We'll talk about nesting later. const routes = [ { path:'/foo', component: Foo },
  { path: '/bar'(Component: Bar}] // 3. Create router instance and pass 'routes' configuration // You can pass other configuration parameters, but keep it simple for now. Const router = new VueRouter({routes: routes}) // 4. Create and mount the root instance. Const app = new Vue({router}) const app = new Vue({router})$mount('#app') // Now the application is started!Copy the code

You can access the router through this.￥router from any component, and you can access the current route through this.$route

When the route matches successfully, the class attribute value is automatically set. Router-link-active

Dynamic path parameter

const User = {
  template: '<div>User</div>'} const router = new VueRouter({routes: [// dynamic route parameters start with a colon {path:'/user/:id', component: User }
  ]
})
Copy the code

A “path parameter” uses the colon: notation. When a route is matched, the parameter value is set to this.$route.params, which can be used within each component. So we can update the User template to print the ID of the current User:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
Copy the code

Vue-router provides navigation guards that are used to guard navigation by jumping or canceling. There are several opportunities for embedding route navigation: global, single route proprietary, or component level.

Const router = new VueRouter() router. BeforeEach (to,from,next){// To the target route object to enter //from the route the current navigation is leaving //next to the next hook in the pipeline }Copy the code

You can define the following route navigators directly within the routing component:

const Foo = { template: `... ', beforeRouteEnter (to, from, next) {// Call the render component before the corresponding route is confirmed // no! Can!!!! }, beforeRouteUpdate (to, from, next) {// Called when the current route changes but the component is being reused. For example, For a path /foo/:id with dynamic parameters, the component instance will be reused as // renders the same foo component when jumping between /foo/1 and /foo/2. And the hook will be called in that case. // Call beforeRouteLeave (to, from, next) {// Call beforeRouteLeave (to, from, next) {Copy the code
The full navigation resolution process navigation is triggered. Call the leave guard in the inactivated component. Call the global beforeEach guard. Call the beforeRouteUpdate guard (2.2+) in the reused component. Call beforeEnter in routing configuration. Parse the asynchronous routing component. Call beforeRouteEnter in the activated component. Call the global beforeResolve guard (2.5+). Navigation confirmed. Call the global afterEach hook. Trigger a DOM update. Call the callback passed to Next in the beforeRouteEnter guard with the created instance.Copy the code