vue-route navigation guard

What are Navigation Guards?

Navigation guard is to guard the navigation by jumping or canceling.

1. Global front guard

Divided into global front guard ,

By router.beforeEachregistering a global front guard

const router=new VueRuter({
})
router.beforeEach((to,from,next)=>{
    //do something
})

parameter parsing

- to:routeThe incoming target route object.
- from:routeThe route the current navigation is leaving.
- next:FunctionBe sure to call this method to resolve this hook .
– next(): proceed to the next hook in the pipeline. If all hooks are executed, the state of the navigation is confirmed(confirmed).
– next(false): Interrupt the current navigation. The URL is reset to fromthe address corresponding to the route.
– next('/')或者next({ path:'/' }): Jump to a different address. The current navigation is interrupted and a new one is made. You can pass arbitrary position objects to next(). And allows to set objects such as replace:true, name:'home'etc. and any options router-linkin to属性, router.push()in .

2. Global parsing guard

3. Global post hook

The rear hook is somewhat similar to the front hook. Unlike guards , it does not accept the next function, nor does it change the navigation itself .

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

4. Routing exclusive guard

Guards can be defined directly on the route beforeEnter, and these parameters are the same as the global pre-guards.

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

5. Guards inside components

Route navigation guards can be defined within components.

const Foo={
    template:`...`,
    beforeRouteEnter(to,from,next){
    //在渲染该组件的对应路由  被confirm前  调用
    //不能获取组件实例 this
    //因为当守卫执行前，组件实例还没有被创建
    },
    beforeRouteUpdate(to,from,next){//2.2新增
    //当路由被改变但是该组件被复用时调用
    //举例来说，对于一个带有动态参数的路径/foo/:id,在/foo/1和/foo/2之间跳转，由于会渲染同样的Foo组件，
    //因此组件实例会被复用，这个钩子就会被调用。
    //可以访问组件实例的 this
    },
    beforeRouteLeave(ro,from,next){
    //导航离开该组件的对应路由时调用
    //可以访问组件实例的this
    }
}

Although beaforeRouteEnterthe guard is not accessible this, there is a compromise: pass a callback to next

beforeRouteEnter(to,from,next){
 next(vm=>{
  //通过vm访问组件实例
 })
}

beforeRouteLeaveGuards are often used to prevent users from leaving without saving their changes. The navigation can be cancelled with next(false).

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

6. Complete navigation analysis process

1. Navigation is started
2. Leave guard is called in deactivated component 3. Global guard is called 4. Guard is called in reused component (2.2+) 5. Called in routing configuration 6. Resolve asynchronous routing component 7. Called in the activated component 8. Call the global guard (2.5+) 9. Navigation is confirmed 10. Call the global hook 11. Start DOM update 12. Use the created instance to call the callback function passed to next in the guard.
beforeEach
beforeRouteUpdate
beforeEnter

beforeRouteEnter
aferResolved

afterEach

beforeRouteEnter

Official website link