路由导航钩子

作用：拦截导航，完成跳转或取消。

三种方式：

1、全局导航钩子

2、单个路由独享

3、组件内导航钩子

 

1、全局导航钩子：

//全局前置守卫
var router=new VueRouter({...});

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

​    //to  目标route

​    //from 要离开的route

​     // next() 进入到to路由

​     // next(false) 中断，不进入to，重置回from

​     // next('/')==next({path:'/'}), 中断当前，跳转到/

​     // next(error) ,被终止的同时，抛出错误

});

//全局后置钩子
router.afterEach((to,from)=>{
    
})

2.单个路由独享钩子

var router=new VueRouter({
    routes:[{
        path:'',
        component:'',
        beforeEnter:(to,from,next)=>{
            //针对某个路由的导航钩子，用法和全局钩子一样
        }
    }]
});

3、组件内导航钩子

beforeRouteEnter(to,from,next){
    //此时组件实例还没被创建，不能获取this
    next(vm => {
    // 通过 `vm` 访问组件实例
  })
}
beforeRouteUpdate(to,from,next){
    //此时可以访问this
    //在路由改变，但是该路由被复用时调用
    // /foo/1 和 /foo/2 之间跳转的时候，/foo组件会被复用，但是此时可以获取到id 1和2
}

 beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }