Vue.js
Vue-router-3.0.1 使用router.addRoutes()设置动态路由，页面刷新后无效
发布于 3 年前 作者 feer 1945 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

vue-router-3.0.1 使用router.addRoutes()设置动态，页面刷新后无效

问题总述

vue-router-3.0.1 使用router.addRoutes()设置动态路由，从非动态路由（router初始化时就存在的路由）页面跳转到动态添加的路由的页面，一切正常。但是，在动态添加的路由的页面刷新后（即动态路由对应的页面自己刷新再路由到自己），路由匹配失败，页面无法渲染。

详细介绍

最近做一个小项目，vue相关依赖版本如图：

    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"

项目中，用户登录系统前，初始默认路由如下：

在vux中，state中设置“用户信息”userInfo字段，其中‘uid’为用户登录唯一ID

state: {
    userInfo: {
        uid: '',
        role: ''
    }
},

现在要实现如下功能：

用户登录前，系统菜单栏只有“首页”、“讨论区”两个功能以及对应的初始路由。当用户登录系统后，动态添加“个人中心”模块和其对应路由。

个人实现机制如下：

  1. 用户登录前，实例化“首页”和“讨论区”的初始路由

    // router/index.js /**

    • 静态路由 */ export const staticRouters = [{ path: ‘/’, redirect: ‘/Home’ }, { path: ‘/Home’, component: Wrapper, children: [{ path: ‘’, name: ‘Home’, component: Home }], meta: { name: ‘首页’ } }, { path: ‘/DiscussZone’, component: Wrapper, children: [{ path: ‘’, name: ‘DiscussZone’, component: DiscussZone }], meta: { name: ‘讨论区’ } }, { path: ‘/Login’, name: ‘Login’, component: Login }, { path: ‘/Register’, name: ‘Register’, component: Register }]

    export default new Router({ routes: staticRouters })

  2. 当用户登录系统后，将用户`uid`写入浏览器`localStorage`中（后面用户强制刷新页面时，要使用其判断），同时提交`mutation`，设置`vue`x中`stat`e的`uesrInfo.uid`字段，此时，`uid`字段改变，便会重新计算`getters`中的用户菜单栏`(userStatusMenu)`，在系统菜单栏动态添加“个人中心”模块入口，并计算出该模块的动态新增的路由`userDynamicRouters`。

    // router/index.js /**

    • 动态路由 / export const dynamicRouters = [{ path: ‘/MyCenter’, component: Wrapper, children: [{ path: ‘’, name: ‘MyCenter’, component: MyCenter, children: myCenterRouter }], meta: { name: ‘个人中心’ } }, { path: '’, name: ‘404’, component: NotFound }]

    /**

    • “个人中心” 子路由 */ const myCenterRouter = [{ path: ‘myGame’, name: ‘myGame’, component: MyGame, meta: { name: ‘我发布的比赛’ } }, { path: ‘myPosttings’, name: ‘myPosttings’, component: MyPosttings, meta: { name: ‘我的帖子’ } }]

    import { dynamicRouters } from ‘@/router/index’ // 动态路由部分路由配置

  1. vuex中gettes计算求得需要动态新增的路由userDynamicRouters后，使用router.addRoutes``(userDynamicRouters)添加动态路由到初始化的路由实例对象router。

至此，初步解决了根据用户登录状态动态生成系统菜单栏功能模块入口和添加动态路由功能。登陆后，动态添加的“个人中心”模块也可以正常路由。

但是系统页面F5或者Ctrl+F5刷新后，因为刷新页面vuex和router实例会重新初始化到初始状态，所以vuex中state.userInfo.uid和新增的动态路由会被刷掉。

所以，在main.js中设置全局路由守卫router.beforeEach()，当页面刷新时重新判断登录时存储的localStorage中uid字段，如果存在，说明用户登录，此时如果vuex中state.userInfo.uid如果为空，说明是用户登录后进行了刷新页面的操作，此时会重新向vuex提交mutation，设置state.userInfo.uid，并重新计算动态路由，再addRotes()到路由实例router。如下图：

至此解决了页面刷新时，动态路由失效的问题。

但是，But，However，我遇到了一个的坑，也是这篇帖子最后想问的问题！！前面交代那么多，就是想把自己实现的机制描述清楚，方便大神带带我，指导一下！！

我遇到的坑和问题

**这个坑是：**我在“首页”、“讨论区”这种router初始化时就存在的模块中点击菜单跳转到动态路由模块“个人中心”包括在这些页面刷新页面后再跳转“个人中心”时，一切路由都正常！But，但是，在进入“个人中心”，也就是路由到动态增加的动态路由后，在动态路由页面直接刷新页面，却无法正常路由，页面没有渲染！！
找了半天，google，度娘找了一圈，也没找到处理方法！小弟愚钝，请大神赐教！！帮忙看看什么原因？

回到顶部