vue路由守卫,路由拦截,导航守卫

路由守卫就是当⻚⾯跳转的时候会触发的钩⼦函数,
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//---是写在路由配置里边的
 	}
 }
 ]

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值