vue-router 路由守卫 与 vuex

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue是单页面应用 ，各个页面的跳转需要路由支持，当然也可以 v-if/v-show，但是实际开发中不现实

 为一个项目做鉴权就可以用解决方案去vuex里面读取状态，根据状态 来调用 router" title="vue-router">vue-router的路由守卫来实现，鉴权路由跳转

官方链接： 

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

 写判断逻辑的时候 一定要注意next()的调用，不能多重调用 会形成死循环，最少要调用一次，不然不会跳转

这两张图可以看出它的运行机制，在每次跳转前都会执行   beforeEach（），

to.path === '/login'  为true  就会执行  next('/login')  ；其实执行next('/login')  又会执行beforeEach（） 所以一直在循环执行，就相当于 路由一直在跳转“/login” 之前  一直没跳成功

直接 调用next()   让其成功跳转一次  就可以出‘/login’的循环

就相当于 一次 next（）的调用  要对应一次成功的路由跳转，上面的情况就是调用了又没有成功跳转，所以一直在哪儿循环...

鉴权超时登录 利用vuex可以存储个时间戳  

因为没有后端支持 所以存了个本地，实际开发前后端分离  是应该从服务器读取数据

以上是 vue-router 路由守卫 与 vuex 的全部内容， 来源链接： utcz.com/z/378277.html

回到顶部