@[TOC] 修改记录
vue-router 动态添加路由,二次添加遇到的问题
问题(vue版本:2.6.2):
- 因为路由根据登录角色获取的路由信息,如果退出后再次登录则需要重新获取路由信息
- 因为addRoutes 给路由表中添加路由,导致有些路由信息重复报警告:
Duplicate named routes definition
解决:
// constantRoutes是公共路由,如下:
export const constantRoutes = [{
path: '/redirect',
component: Layout,
hidden: true,
children: [{
path: '/redirect/:path(.*)',
component: (resolve) => require(['@/views/redirect'], resolve)
}]
}]
// 将router.js下的index.js中的如下代码:
export default new Router({
mode: 'hash', // 去掉url中的#
scrollBehavior: () => ({
y: 0
}),
routes: constantRoutes
})
// 修改为------------------------
export const createRouter = (routes) => new Router({
mode: 'hash', // 去掉url中的#
scrollBehavior: () => ({
y: 0
}),
routes
})
export const router = createRouter(constantRoutes);
找到使用 addRoutes
方法的文件
// 将router 的引入如下
import router from './router'
// 修改为------------------------
import { router, createRouter,constantRoutes } from '@/router'
// 将router.addRoutes这段代码如下:
router.addRoutes(accessRoutes) // 动态添加可访问路由表
// 修改为------------------------
router.matcher = createRouter(constantRoutes).matcher; // 重置路由表
router.addRoutes(accessRoutes) ;// 动态添加可访问路由表
// accessRoutes:就是你请求到的路由信息的自定义字段
// 注意 router, createRouter,constantRoutes 要一一对应
注意: 这个时候并没有修改完成,你可能会发现如下错误
Error in render: "TypeError: Cannot read property 'matched' of undefined"
找到所有 import router from './router'
的文件。一般在都是main.js。
// 将如下代码:
import router from './router
//修改为------------------------
import {router} from './router'
主要是因为在修改router.js中的代码时,导出方式变更了,所以改掉即可。
如需学习Matcher,请看Vue Router中Matcher的初始化分析
如有错误,或疑问请留言,谢谢各位观看!