关于vue-element-admin中的router问题

在router.beforeEach中添加身份验证条件之后

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if (getToken()) {
    // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger    afterEach hook, so manually handle it
    } else {


      if(store.getters.userRole == 1 || store.getters.userRole == 2){
        router.addRoutes(asyncRoutes) // 动态添加可访问路由表
        // console.log(router)
        // console.log(to)
        next({ ...to, replace: true })
        // next({ path: '/' })
      }else{
        router.addRoutes(constantRoutes) // 动态添加可访问路由表
        next({ ...to, replace: true })
      }
    }
  } else {
    // alert('获取失败')
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单,直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

浏览器报错内存泄漏,Maximum call stack size exceeded

下面是我的路由

export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/authredirect'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/errorPage/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/errorPage/401'),
    hidden: true
  },
  {
    path: '',
    component: Layout,
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }
      }
    ]
  },
  {
    path: 'dashboard',
    component: () => import('@/views/dashboard/index'),
    // name: 'Dashboard',
    meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }
  }
  // {
  //   path: '/documentation',
  //   component: Layout,
  //   children: [
  //     {
  //       path: 'index',
  //       component: () => import('@/views/documentation/index'),
  //       name: 'Documentation',
  //       meta: { title: 'documentation', icon: 'documentation', affix: true }
  //     }
  //   ]
  // },
  // {
  //   path: '/guide',
  //   component: Layout,
  //   redirect: '/guide/index',
  //   children: [
  //     {
  //       path: 'index',
  //       component: () => import('@/views/guide/index'),
  //       name: 'Guide',
  //       meta: { title: 'guide', icon: 'guide', noCache: true }
  //     }
  //   ]
  // }
]

export default new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

export const asyncRoutes = [

  // 初级系统不支持用户管理
  // {
  //   path:'/users',
  //   component:Layout,
  //   children:[
  //     {
  //       path:'',
  //       component:() => import('@/views/users/users'),
  //       name:'users',
  //       meta: { title: 'users', icon: 'peoples', noCache: true }
  //     }

  //   ]
  // },
  // {
  //   path: '',
  //   component: Layout,
  //   redirect: 'dashboard',
  //   children: [
  //     {
  //       path: 'dashboard',
  //       component: () => import('@/views/dashboard/index'),
  //       name: 'Dashboard',
  //       meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }
  //     }
  //   ]
  // },

  // {
  //   path: '/redirect',
  //   component: Layout,
  //   hidden: true,
  //   children: [
  //     {
  //       path: '/redirect/:path*',
  //       component: () => import('@/views/redirect/index')
  //     }
  //   ]
  // },
  {
    path: '/aisle',
    component: Layout,
    children: [
      {
        path: '',
        component: () => import('@/views/aisle/aisle'),
        name: 'aisle',
        meta: { title: 'aisle', icon: 'tree', noCache: true }
      }
    ]
  },
阅读 3.4k
评论
    0 个回答
    撰写回答

    登录后参与交流、获取后续更新提醒

    相似问题
    推荐文章