Navigation guard

Navigation indicates that the route is changing. (Today’s picture is very nice.)

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.

1. Global front-guard —-router. BeforeEach

Router. beforeEach Registers a global front-guard:

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

router.beforeEach((to, from, next) = > {
  // to: Which page to go to
  // From: from where
  // next: it is a function.
  // Next ()
  // If you want to jump to another page next(other page)
})
Copy the code

Sample code:

router.beforeEach(async(to, from, next) => {
  NProgress.start() // Start the progress bar
  const token = store.state.user.token
  const userId = store.state.user.userInfo.userId
  console.log(token, to.path, from.path)
  if (token) {
    if (to.path === '/login') { // If you have a token, go to login
      next('/')
      NProgress.done() // Close the progress bar
    } else { // If you have a token, go to another page and release it
      if(! userId) {await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (to.path === '/login') { // No token, go to login, permit
      next()
    } else {
      next('/login') // No token, go to another page
      NProgress.done()
    }
  }
})
Copy the code

summary

  • Router. BeforeEach (callback (three parameters))
  • In the navigational guard function, be sure to call next()
  • To. path: To is a routing object. Path represents a path and is an attribute of it

2. Global post-hook —- router.aftereach

AfterEach registers a global afterhook:

You can also register global post-hooks, however unlike guards, these hooks do not accept the next function nor change the navigation itself:

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

3. Global resolution guard —-router.beforeResolve

In 2.5.0+ you can register a global guard with router.beforeResolve. This is similar to router.beforeeach, except that the parse guard is called before the navigation is confirmed and after all the intra-component guards and asynchronous routing components are parsed.

4. Route exclusive guard

You can define beforeEnter guards directly on the routing configuration:

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

5. Guards within components

  • beforeRouteEnter
  • beforeRouteUpdate(new) 2.2
  • beforeRouteLeave
const Foo = {
  template: `... `.beforeRouteEnter(to, from, next) {
    // called before the corresponding route to render the component is confirmed
    / / no! Can!!!! Get component instance 'this'
    // Because the component instance has not been created before the guard executes
  },
  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, when jumping between /foo/1 and /foo/2,
    // Since the same Foo component will be rendered, the component instance will be reused. And the hook will be called in that case.
    // Access component instance 'this'
  },
  beforeRouteLeave(to, from, next) {
    // called when navigating away from the component's corresponding route
    // Access component instance 'this'}}Copy the code

Complete navigation parsing process

  1. Navigation is triggered.
  2. Called in a deactivated componentbeforeRouteLeaveThe guards.
  3. Call globalbeforeEachThe guards.
  4. Called in a reused componentbeforeRouteUpdateGuard (+ 2.2).
  5. Called in the routing configurationbeforeEnter.
  6. Parse the asynchronous routing component.
  7. Called in the active componentbeforeRouteEnter.
  8. Call globalbeforeResolveGuard (+ 2.5).
  9. Navigation confirmed.
  10. Call globalafterEachHook.
  11. Trigger a DOM update.
  12. callbeforeRouteEnterGuard passnextThe created component instance is passed in as an argument to the callback function.