Detailed explanation of VueRouter's advanced navigation hooks and routing meta information

Navigation hook

The navigation hook provided by vue-router is mainly used to intercept navigation and allow it to complete jump or cancel. There are several ways to execute hooks when routing navigation occurs: global, single route-only, or component-level.

Global hook

You can register a global before hook using:

const router = new VueRouter({ ... })

((to, from, next) => {
 // ...
})

When a navigation is triggered, the global before hook is called in the order of creation. Hooks are asynchronously parsed and executed. At this time, the navigation is waiting until all hooks resolve.

Each hook method receives three parameters:

to: Route: The target to be entered Routing object
from: Route: The route that the current navigation is about to leave
next: Function: Be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.
next(): performs the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.
next(false): interrupts the current navigation. If the browser's URL has changed (maybe it's manual or the browser's back button), the URL address will be reset to the corresponding address from route.
next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is performed.

Make sure to call the next method or the hook will not be resolved.

You can also register a global after hook, but it is not like the before hook. The after hook does not have a next method and cannot change the navigation:

(route => {
 // ...
})

You can directly define the beforeEnter hook on the routing configuration:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

These hooks have the same method parameters as the global before hook.

Hooks inside components

Finally, you can directly define the following routing navigation hooks within the routing component:

beforeRouteEnter
beforeRouteUpdate (2.2 New)
beforeRouteLeave
const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // Called before rendering the corresponding route of the component is confirmed  // No!  able!  Get component instance `this`  // Because the component instance has not been created before the hook is executed },
 beforeRouteUpdate (to, from, next) {
  // Called when the current route changes but the component is reused  // For example, for a path with dynamic parameters /foo/:id, when jumping between /foo/1 and /foo/2,  // Since the same Foo component is rendered, component instances are reused.  And this hook will be called in this case.  // Component instances can be accessed `this` },
 beforeRouteLeave (to, from, next) {
  // Called when navigation leaves the corresponding route of this component  // Component instances can be accessed `this` }
}

beforeRouteEnter hook cannot access this because the hook is called before navigation confirmation, so the new component that will be launched has not been created yet.

However, you can access the component instance by passing a callback to next. When the navigation is confirmed, the callback is executed and the component instance is used as a parameter to the callback method.

beforeRouteEnter (to, from, next) {
 next(vm =&gt; {
  // Access component instances through `vm` })
}

Routing meta information

You can access this directly in beforeRouteLeave. This leave hook is usually used to prohibit users from leaving suddenly before they have saved the modification. You can cancel the navigation through next(false).

When defining routes, you can configure the meta field:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true }
    }
   ]
  }
 ]
})

So how do you access this meta field?

First, we call each route object in the routes configuration a route record. The routing record can be nested, so when a route matches successfully, it may match multiple routing records.

For example, according to the above routing configuration, the URL /foo/bar will match the parent route record and the child route record.

All route records matched by a route are exposed as $arrays of $route objects (and route objects in the navigation hook). Therefore, we need to iterate over $ to check the meta field in the routing record.

The following example shows checking the meta field in the global navigation hook:

((to, from, next) =&gt; {
 if ((record =&gt; )) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!()) {
   next({
    path: '/login',
    query: { redirect:  }
   })
  } else {
   next()
  }
 } else {
  next() // Make sure to call next() }
})

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.