vue router 动态菜单实现问题汇总

其他router相关内容索引

序号	内容	连接地址
1	vue router 整合引入	https://blog.csdn.net/qq_21271511/article/details/109368459
2	vue router 模块化开发	https://blog.csdn.net/qq_21271511/article/details/109369247
3	vue router 动态路由及菜单实现之一	https://blog.csdn.net/qq_21271511/article/details/109496415
4	vue router 动态路由及菜单实现之二	https://blog.csdn.net/qq_21271511/article/details/109998976
5	vue router 动态路由及菜单实现问题汇总	https://blog.csdn.net/qq_21271511/article/details/110038256
6	vue el-menu多级菜单递归	https://blog.csdn.net/qq_21271511/article/details/109889934
7	vue router 懒加载常见写法	https://blog.csdn.net/qq_21271511/article/details/109776741

vue router 动态菜单实现问题

问题一：刷新页面router丢失

动态路由页面刷新时显示undefine，实际是未找到路由

问题分析

刷新页面会导致动态加载的router数据被清理，我们只在登录的时候加载路由是不行的，后续刷新这个路由就没有地方可以重新加载了，所以直接访问就直接undefine了。

问题解决

这个开始我尝试的思路也有几个：
1、刷新问题，会将store中的数据刷新掉，但localstorage和sessionStorage中的数据不会刷新掉，可以将菜单放到这两个里面。这个方案也是可行的，刷新router还在，就是router和菜单都从storage中取值。但这两个东西的空间都不大，也还要放其他的内容。

2、在每个页面挂载的时候加载的时候调用菜单和router的初始化方法。这样写也行，就是将login的create方法里调用的store方法封装到Header组件里面，然后每个页面都有这个，就都会加载一波。刷新也没有问题

3、最后就是在router跳转的时候的，把刷新的情况区分出来，这样就在页面跳转和刷新的两种情况处理一下，该加载的时候重新加载就可以了

最后采用的还是在路由导航守卫中添加，每次跳转时判断菜单是否存在，不存在则重新加载。

//判断store中是否含有routers，含有则是正常跳转
    if (router.app.$options.store.state.asyncRoutes.addRoutes.length > 0) {
      next();
    }
    //不含有则是用户F5刷新
    else {
      console.log("to:" + to);
      console.log("from:" + from);
      //生成菜单，路由变化时生成菜单。
      /*
      * config中 publicPath设置为"/" ，每次刷新页面时，
      * 会先从publicPath跳转到 to.path，再从to.path 跳转到 to.path。
      * 执行两次beforeEach中的内容
      */
      if (from.path != to.path) {
        router.app.$options.store.dispatch("GenerateRoutes")
          .then(res => {
            console.log(res);
          })
      }
      next();
    }

这里最重要的是如何判断用户是正常跳转，还是点击刷新。这点因为刷新的话store中的数据会清空，所以根据这个来判断就可以了。

问题二：beforeEach加载两次

beforeEach加载两次问题。接上个问题一，这样调用的时候会加载两次beforeEach，找了半天的原因，终于给发现了。在网上也看了一些博客和帖子，还有issue，但原因都模糊不清。

问题分析

router.beforeEach在路由变化时会发生调用，但是刷新为啥会有两次路由变化。通过记录from和to的path，可以查看到路由跳转的变化。

第一次：from “/” to 刷新的路由

第二次：from 刷新的路由 to 刷新的路由

可以看到刷新路由，都是从path “/” 开始的，但我们访问的时候是只要"/system/home" 这个指定路由的。

怀疑是vue.config.js中的publicPath影响了，配置为"/"。是不是配置为"/"的都会从/ 开始跳转

问题解决

判断路由变化的时候再做相关操作。这里就直接判断from的path和to的path是否有变化，没有变化的就不管了

if (from.path != to.path)

publicPath的目前还没搞清楚是怎么影响的，不过这个不影响解决问题，嘿嘿