1. What is the routing guard?

In short, the navigation guard is some hook functions in the process before, during and after route jump. This function allows you to operate some other things. This is the navigation guard.

According to the official explanation, the navigation guard provided by Vue router is mainly used to guard navigation by jumping or canceling.

2. Routing guard classification (three types)?

Navigation guards are divided into three types: global, in component, and single route exclusive

Global guard

Global pre guard router beforeEach
Global resolution guard router beforeResolve
Global post hook router afterEach

1. Global front guard
You can use router Before each registers a global front guard:

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

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

Each guard method receives three parameters:

to: Route: the target route object to be entered

from: Route: the route that the current navigation is about to leave

next: Function: hook function, which defines parameters to confirm what to do in the next route

next('/') or next({path: '/'}): jump to a different address. The current navigation is interrupted and a new navigation is performed. You can pass any location object to next, next({name: 'home'}).
General applications redirect to / login when the user fails to authenticate:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

2. Global resolution guard
In 2.5.0 +, you can use router Beforeresolve registers a global guard. This is similar to router Beforeeach is similar. The difference is that before the navigation is confirmed, and after the guard and asynchronous routing components in all components are resolved, the resolution guard is called

3. Global post hook
The difference is that the post hook will not accept the next function and will not change the navigation itself:

router.afterEach((to, from) => {
  // ...
})

Guard in assembly

The following route navigation guards can be defined directly in the routing component:

Guard beforeRouteEnter before grouping components
Guard before routeupdate during route update (new in 2.2)
Guard when leaving the component beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // Before rendering the component, the corresponding route is called before confirm.
    // no Yes! Get component instance ` this`
    // Because the component instance has not been created before the guard is executed
  },
  beforeRouteUpdate(to, from, next) {
    // Called when the current route changes but the component is reused
    // For example, for a path / foo/:id with dynamic parameters, when jumping between / foo/1 and / foo/2,
    // Since the same Foo component will be rendered, component instances will be reused. The hook will be called in this case.
    // Can access component instance ` this`
  },
  beforeRouteLeave(to, from, next) {
    // Called when the navigation leaves the corresponding route of the component
    // Can access component instance ` this`
  }
}

beforeRouteEnter guard cannot access this because the guard is called before navigation confirmation, so the new component to be launched has not been created.

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

beforeRouteEnter (to, from, next) {
  next(vm => {
  vm.$store.state.token
    // Accessing component instances through 'vm'
  })
}

Note that beforeRouteEnter is the only guard that supports passing callbacks to the next. For beforeRouteUpdate and beforeRouteLeave, this is already available, so callback delivery is not supported because it is not necessary.

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

This exit guard is usually used to prevent users from leaving suddenly before saving their changes. The navigation can be cancelled by next(false).

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

Route exclusive guard

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

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

The method parameters of these guards are the same as those of the global front guard.