Vue 动态路由遇到的问题

1、动态路由配置

出现问题 Maximum call stack size exceeded

路由守卫问题

router.beforeEach((to, from, next) => {
  // 登录界面登录成功之后，会把用户信息保存在会话
  // 存在时间为会话生命周期，页面关闭即失效。
  var isLogin = Cookies.get('token')
  if (to.path === '/login') {
    // 如果是访问登录界面，如果用户会话信息存在，代表已登录过，跳转到主页
    if (isLogin) {
      next({ path: '/' })
    } else {
      next()
    }
  } else {
    // 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
    if (!isLogin) {
      next({ path: '/login' })
    } else {
      // 加载动态菜单和路由
      if (dynamicMenuRoutesHasAdded) { // 添加过的路由，就不重复添加了
        next()
      } else {
        addDynamicMenuAndRoutes()
        next()
      }
    }
  }
})

2、动态路由配置

我在这里定义了一个全局变量，来控制添加过的路由不能重复添加。

var dynamicMenuRoutesHasAdded = false

function addDynamicMenuAndRoutes () {
  api.menu.findMenuTree()
    .then((res) => {
      store.commit('setMenuTree', res.data)
      // 添加动态路由
      const dynamicRoutes = addDynamicRoutes(res.data)
      router.options.routes[0].children = router.options.routes[0].children.concat(dynamicRoutes)
      // router.addRoutes(router.options.routes)
      router.$addRoutes(router.options.routes)
      dynamicMenuRoutesHasAdded = true // 添加过变成true
    })
    .catch(function (res) {
      alert(res)
    })
}

if (dynamicMenuRoutesHasAdded) { // 添加过的路由，就不重复添加了
        next()
      } else {
        addDynamicMenuAndRoutes()
        next()
      }

 

3、根据动态路由，加载不同的页面

引入路径的时候，采用了立即执行函数，否则循环中的i 值不对

((j) => {
            route.component = resolve => require([`@/views/${menuList[j].url}`], resolve)
})(i)

 

4、遇到警告：

Duplicate named routes definition 

转载下面 https://www.jianshu.com/p/915705ddf924  解决的。