作用:拦截导航,完成跳转或取消。
三种方式:
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)=>{ })
var router=new VueRouter({ routes:[{ path:'', component:'', beforeEnter:(to,from,next)=>{ //针对某个路由的导航钩子,用法和全局钩子一样 } }] });
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` }