vue路由守卫(全局守卫)
router.beforeEach((to,from,next)=>{})
回调函数中的参数,
to:进入到哪个路由去,
from:从哪个路由离开,
next:函数,决定是否展示你要看到的路由页面。
- 如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。
- 这样就可实现,用户在未登录状态下,展示的一直是登录界面。
router.beforeEach((to,from,next)=>{ if(to.path == '/login' || to.path == '/register'){ next(); }else{ alert('您还没有登录,请先登录'); next('/login'); } })
全局后置钩子router.afterEach((to,from)=>{})
- 只有两个参数,
- to:进入到哪个路由去,
- from:从哪个路由离。
- 如下,每次切换路由时,都会弹出alert,点击确定后,展示当前页面。
router.afterEach((to,from)=>{ alert("after each"); })
关于next这个方法的描述应该如何理解
1.next()
你乘坐汽车要从A景区到B景区,路过关卡时,守门人拦下你,你量出了next(),守门人一看没问题,赶紧放行,于是你顺利到达了B景区。
2.next(false)
如果你量出了next(
false
),守门人立马关住大门,不让你走,哪都不让你去,你说想换个交通方式,走路或者坐飞机,都不行,老实待在A景区吧
3.next('/')
你原本打算从A景区到B景区,但是走到关卡的时候由于某些原因改变了主意,想要去C景区,你对守门员量出了next({path:
'/C'
}),守门员一看,哦,原来你不去B了,要去C啊,去吧去吧,然后你顺利到达了C景区
4.next(error)
你在出发之前,给你妈妈说,妈,要是有什么事我立马通知你,你记得查看消息啊(你注册了router.onError())走到中途,出现了意外,你发出next(error),然后你妈就收到了消息,赶紧打电话问你怎么了(执行router.onError()里的回调)