导航守卫:vue-router主要提供跳转或取消的方式守卫导航, 导航守卫分为全局前置守卫、全局解析守卫、全局后置钩子、路由独享的守卫、组件内的守卫
-
全局前置守卫
beforeEach(router.beforeEach((to,from,next)=>{})),当一个导航触发时,全局前置守卫按照创建顺序调用,守卫是异步解析执行,此时导航在所有守卫resolve(解析)之前一直在等待中,每个守卫含有三个参数:to、from、next:
1)to:即将进入的路由目标对象
2)from:当前导航离开的路由
3)next:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
a)next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
b)next(false):中断当前的导航,如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
c)next("/login")或next({path:"/login"}):跳转到login页面
d)next(error):如果传入 next
的参数是一个 Error
实例,则导航会被终止且该错误会被传递给 router.onError()
注册过的回调
例:
router.beforeEach((to,from,next)=>{
if(to.path=="/login"){
next()
}else{
let token=localStorage.getItem("token");
if(token==null || token=="" ){
next("/login")
}else{
next()
}
}
})
}
-
全局后置钩子
afterEach(router.afterEach((to,from)=>{})), 只有两个参数,to:进入到哪个路由,from:从哪个路由离开。
-
路由独享的导航钩子
beforeEnter((to,from,next)=>{})r:即单个路由独享的导航钩子,它是在路由配置上直接进行定义的
const router=new Router({
mode:"history",
routes:[
{
path:"/home",
component:resolve=>require(["../components/home.vue"],resolve),
beforeEnter((to,from,next)=>{
//do something
})
}
]
})
-
组件内的守卫
1.beforeRouteEnter((to,from,next)=>{}):导航进入该组件的对应路由时调用(此时this不可用)
beforeRouteEnter((to,from,next)=>{ next(vm=>{ }) })
2.beforeRouteUpdate((to,from,next)=>{}):在当前路由改变,但是该组件被复用时调用(此刻this可用,不支持回调)
beforeRouteUpdate((to,from,next)=>{
this.name=to.params.name;
next()
})
3.beforeRouteLeave((to,from,next)=>{}):导航离开该组件的对应路由时调用
(这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消,此刻this也可用)
beforeRouteLeave((to,from,next)=>{
if(to.path=="/home"){
next(false)
}
})
网友评论