路由守卫就是当⻚⾯跳转的时候会触发的钩⼦函数,
vue⼀共给我们提供了三种路由守卫
全局路由守卫
前置守卫:
router.beforeEach((to,from,next) => {})
to-到哪里去 from –从哪里来 next–重定向
//路由拦截 我们经常使⽤路由守卫实现⻚⾯的鉴权
router.beforeEach((to,from,next) => {
const token = store.state.koten;
if(!token && to.name!='Login'){//如果没有token 并且当前页不是登陆页
next("/login")//去登陆页
{
if(token && to.name=="Login"){//如果有token 并且当前页是登陆页
next("/")//去首页
}
next()//如果有token 并且当前页不是登陆页,则继续它的操作
}
后置守卫:
router.afterEach((to,from) => {})
//!!!!没有next
组件级路由守卫
beforeRouteEnter(to,from,next){}//---路由进入之前
beforeRouteUnpdate(to,from,next){}//---路由更新之前(特定的值 组件没变 ---路由变了--动态路由)
beforeRouteLeave(to,from,next){}//---路由离开之前
独享守卫
const routes = [
{
path:"/",
name:"Home",
component:Home,
beforeEnter(to,from,next){
console.log(to,from,next)
//beforeEnter//---是写在路由配置里边的
}
}
]
版权声明:本文为m0_60531448原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。