In scaffolding, the global navigational guard is defined in index.js, written below the const Router

Global front-guard beforeEach

router.beforeEach((to, from, next) => { if(to.path == '/b'){ next({ path:"/login" }) }else{ next(); }})Copy the code
Each guard method takes three arguments:
  • To: Route: indicates the Route to be routed
  • From: Route: indicates the current Route to leave
  • Next: Function: Performs the next operation. If you don’t call next, the route gets stuck here and doesn’t go down
This parameter is used together with routing meta information

If there are multiple routes in the website that need to be judged before entering, it is possible to add a meta attribute to each route when registering the routing component, so that to is printed in the navigation guard. It can be seen that to has a meta attribute, and we can judge whether to proceed directly to next() by judging the meta.

const routes = [ .... {path: '/center', name: 'center', component: () => import('../views/Center.vue'), meta: { requiresAuth: true }} .... ]  const router = new VueRouter({ routes, }) router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { if (! localStorage.getItem('user')) { next({ path: '/sign' }) } else { next() } } else { next() } })Copy the code

Global parse guard beforeResolve

It doesn’t matter. Just know

The global afterhook afterEach

  • This guard has no next parameter!!
  • Because by the time it triggers, the route has already gone from/A to/B

Exclusive route guard beforeEnter

  • A navigational guard used by itself in routing
  • The beforeEnter effect is equivalent to the beforeEach in the global guard, except that this beforeEnter is used only for the current route
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
Copy the code

Component internal guard

  • BeforeRouteEnter it cannot access this internally!!
  • beforeRouteUpdate
  • beforeRouteLeave
  • BeforeRouteEnter is the only guard that supports passing a callback to Next
const Foo = { template: `... ', beforeRouteEnter (to, from, next) {// Call the render component before the corresponding route is confirmed // no! Can!!!! Get component instance 'this' // because the component instance has not been created before the guard executes // because it cannot access this, So it supports passing a callback to next to access the component instance next(VM => {// access the component instance through 'VM'})}, beforeRouteUpdate (to, from, next) {// In the current route change, For example, for a path /foo/:id with dynamic parameters, // will be reused since the same foo component will be rendered when it jumps between /foo/1 and /foo/2. And the hook will be called in that case. }, beforeRouteLeave (to, from,); Next) {// called when navigating away from the component's corresponding route // Component instance 'this' can be accessed // This departure guard is usually used to prevent users from abruptly leaving without saving changes. This navigation can be cancelled by next(false). }}Copy the code