<label id="3fc03e6c"></label>


        
           
           
           
           
           
        <legend id="4dfe8730"></legend>

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

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

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

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

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

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

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

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

        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)
        机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
        地名: 匿名?