vue导航守卫

2019-07-26  本文已影响0人  牛妈代代

根据作用域的不同,vue导航守卫分三种:全局导航守卫、组件内部导航守卫、路由独享守卫

全局导航守卫,在main.js中定义导航守卫

1、router.beforeEach((to, from, next) => { /* must call `next` */ })   //路由跳入前判断
2、router.beforeResolve((to, from, next) => { /* must call `next` */ })  
3、router.afterEach((to, from) => {})  //路由跳出前执行函数,确定后跳出,然后在显示页面;

组件内部导航守卫,只作用于该组件;为啥我一直想叫导航卫士呢,好吧

1、beforeRouteEnter(to,from,next){}      //路由跳入前执行函数,不可访问this.data
2、beforeRouteLeave(to,from,next){}     //路由跳出执行函数,确认后跳出
3、beforeRouteUpload(to,form,next){}    //在当前路由改变,但是该组件被复用时调用

注意,beforeRouteEnter(to,from,next){}无法调用data数据,data为渲染,可以使用next()回调来获取,next(vm=>{ console.log(vm.msg) })

路由独享守卫

定义在routes里面的,作用与制定路由
beforeEnter:(to, from, next)    //路由独享守卫;

导航钩子有3个参数:
1、to:即将要进入的目标路由对象;
2、from:当前导航即将要离开的路由对象;
3、next :调用该方法后,才能进入下一个钩子函数(afterEach)。
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

上一篇 下一篇

猜你喜欢

热点阅读