狗万官网酒店 > 狗万官网下载 > vue路由守卫及路由守卫无限循环问题详析_vue.js

vue路由守卫及路由守卫无限循环问题详析_vue.js

来源: 2019-09-09 19:43 我来投稿 参与评论
这篇文章主要给大家介绍了关于vue路由守卫及路由守卫无限循环问题的相关资料,文中通过示范代码介绍的独特详细,对大家学习或者使用vue具有原则性的参考学习价值,要求的朋友们下面来累计学习学习吧

先贴一丹麦官方文档的情节

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // ...
})

顶一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,这会儿导航在整个守卫 resolve 完之前一直处于 等待对方。

每个守卫方法接收三个参数:

  • to: Route: 即将要跻身的对象 路由对象
  • from: Route: 目前导航正要离开的路由
  • next: Function: 定点要适用该方法来 resolve 本条钩子。实行效果依赖 next 艺术的合同参数。
  • next(): 开展管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 转移了 (可能是客户手动或者浏览器后退按钮),这就是说 URL 地方会重置到 from 路由对应的地方。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同之地方。目前的导航被中断,接下来进行一番新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 等等的取舍以及其他用在 router-link 的 to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的平均数是一番 Error 老,则导航会把停止且该错误会把传递给 router.onError() 登记过的回调。确保要适用 next 艺术,否则钩子就不会把 resolved
  • 接下来这是我自己之总结

    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/pages/login/Login'
    import Index from '../pages/index/Index'
    import Library from '../pages/library/Library'
    import Design from '../pages/design/Design'
    import Administration from '../pages/administration/Administration'
    import Production from '../pages/production/Production'
    
    import Global from '../common/global/Global'
    
    Vue.use(Router)
    
    const router = new Router({
     routes: [
     {
      path: '/',
      name: 'login',
      component: Login
     }, {
      path: '/index',
      name: 'index',
      component: Index
     }, {
      path: '/library',
      name: 'library',
      component: Library
     }, {
      path: '/design',
      name: 'design',
      component: Design
     }, {
      path: '/administration',
      name: 'administration',
      component: Administration
     }, {
      path: '/production',
      name: 'production',
      component: Production
     }
     ]
    })
    
    router.beforeEach ((to,from,next) => {
     //名将一切需要登陆才显示的页面的路由都放进一个数组
     const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
     //获取登陆状态
     let isLogin = Global.isLogin
     
     if(to.name === 'login') { //如果是登录页,则跳过验证
     next() //必不可少
     return //以下的编码不履行
     }
     if(nextRoute.indexOf(to.name) >= 0) { //认清该页面是否需要登陆
     if(!isLogin) { //认清登陆状态
      next({ name : 'login'}) //如果未登录,则跳转到登录页
     } else {
      next() //如果已经登陆,那就足以跳转
     }
     } else { //其余的无需登陆的页面不做验证
      next()
     }
     
    })
    
    export default router

    这样就贯彻了全局路由守卫

    关于路由守卫无限循环问题

    如果你的编码是这样

     if(isLogin) {
     next()
     } else {
     next({ name: 'login')}
     }

    这样的话就会陷入无限循环

    因为你的   next({ name: 'login')} 是适用于一个路由跳转,其它会再次接触全局路由守卫,你又进入了全局路由守卫进行再次判断,如此循环往复。

    故而,想要结束路由守卫,整段代码的逻辑必须由 next() 开展最后。比如像我上面写的,顶需要进入登录页的时光,

     if(to.name === 'login') { 
     next() 
     return 
     }

    增长这个判断,顶你进入登录页的时光也会调用next() , 路由守卫进入确认状态,路由才会展开跳转

    上述就是我在读书vue-router的路由守卫的总结

    总结

    上述就是这篇文章的方方面面内容了,瞩望本文的情节对大家的上学或者工作具有原则性的参考学习价值,谢谢大家对脚本的师之支持。

    义务编辑:狗万官网酒店
     
     
    0% (0)
     
     
    0% (0)
    机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
    地名: 匿名?
      <label id="3fc03e6c"></label>