vue-router 动态添加路由，二次添加遇到的问题

最新推荐文章于 2024-03-14 09:30:00 发布

原创最新推荐文章于 2024-03-14 09:30:00 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端# vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了解决Vue-router在动态添加路由时遇到的重复问题，通过修改代码结构避免警告并提供了解决方案。

@[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的初始化分析

如有错误，或疑问请留言，谢谢各位观看！