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  解決的。