zoukankan      html  css  js  c++  java
  • 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  解决的。

  • 相关阅读:
    jprofiler配置
    Nginx编译安装
    WebBench的安装与使用
    你经常看到却经常忽视的__init__.py有什么用?
    彻底搞懂Python 中的 import 与 from import
    实现有过期时间的LRU缓存
    实现函数调用结果的 LRU 缓存
    elasticsearch Routing 路由详解
    Elasticsearch _reindex 接口来重新索引数据到新索引,使用新的配置
    浏览器操作elasticsearch别名
  • 原文地址:https://www.cnblogs.com/rabbit-lin0903/p/14292654.html
Copyright © 2011-2022 走看看