路由守卫的作用主要是在跳转前做一些验证,比如登录验证等等。
1、全局的前置守卫:
//to 是指将要去的地方,from 指出发的地方,next 执行下一步。
router.beforeEach((to,from,next)=>{
const isLogin=localStorage.ele_login?true:false
if(to.path=='/login'){
next()
}else{
isLogin?next():next('/login')
}
})
//这是判断是否有登陆,如果前往登录页面则不需要判断登录信息,如果前往其他也页面则需要判断是否有登录。
2、组件内的守卫
//(1)
beforeRouteEnter(to,from,next){
在渲染该组件的对应路由被confirm前调用
不能在这里获取组件的实例this
}
//(2)重点
beforeRouteUpdate(to,from,next){
在当前路由没改变,但是该组件被复用时调用
举例说明:对于带有参数动态变化的路径,'/goods/:id',
在'/goods/1'和'/goods/2'之间来回跳转时调用。
这个钩子在调用时可以访问this
}
//(3)
beforeRouteLeave(to,from,next) {
离开该组件的对应路由时调用
一般使用场景为
(1)当组件中有一个定时器,在路由进行切换的时候可以进行清除定时器
(2)当页面中有未关闭的内容时可以阻止页面跳转
(3)可以保存需要保存的东西到vuex中
}