记录一次vue-router在beforeEach中addRoutes无效

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

  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (!store.getters.name) {
      // 模拟一个请求
        setTimeout(() => {
        // 请求返回的路由数据
          let divRouter = [
            {
              path: '/example',
              component: 'Layout',
              redirect: '/example/table',
              name: 'Example',
              meta: { title: '举个栗子', icon: 'el-icon-s-help' },
              redirect: 'noRedirect',
              children: [
                {
                  path: 'table',
                  name: 'Table',
                  component: () => import('@/views/table/index'),
                  meta: { title: 'Table222', icon: 'table' }
                },
                {
                  path: 'tree',
                  name: 'Tree',
                  component: () => import('@/views/tree/index'),
                  meta: { title: 'Tree', icon: 'tree' }
                }
              ]
            },
          ]
          // 处理组件'Layout'引用
          divRouter.forEach(item => {
            if (item.component && item.component === 'Layout') {
              item.component = Layout
            }
          })
          // 至关重要,单使用addRoutes添加路由不会生效,具体原因不清楚。
          router.options.routes.push(...divRouter);
          router.addRoutes(divRouter)
			
			// 模拟用户信息返回接口
          store.commit('user/SET_NAME', '晨淘淘')
          /* 
          	添加路由后需要重定向 确保addRoutes已完成
          	beforeEach中使用addRoutes是无法添加的,因为这是访问路由之前的钩子,
          	addRoutes过后重定向到访问的页面
          	*/
          next({ ...to, replace: true })
        }, 500)
      } else {
        next()
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next()
      NProgress.done()
    }
  }
})

用的vue-admin-template模板代码。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值