[vue-router] Duplicate named routes definition: { name: “XXX”, path: “XXX” }

一、分析原因

翻译过来就是：定义重复命名的路由。

言外之意就是，与之前命名过该路由名称的路由发生了冲突，所以Vue发出警告。

那为什么是警告？有部分开发人员又或是新手小白觉得，只要不是报bug，那我就不管了，不想浪费自己时间。当你有这种想法的时候你该庆幸你不是在我的团队里，不然我就梆梆给你来两下。

首先查看警告详情：

点进去看看。

找到报warning的位置了，看了一下，这里的意思就是：如果不是生产环境下，那我就给你报这个warning。但是，我们知道这个好像没很大用处对吧，接着看：

在这里找到了有用的信息（其他的也可以点进去看一下，打破砂锅问到底！）：

解析：Vue先判断新创建的路由是否有name属性，当有name属性的时候，如果新的name不在nameMap里面，那就把新的name添加到record里面并且赋值nameMap为更新后的record。否则，且在非生产环境下，就会报warning，这时候就会看见我们开头时候的那个警告。

二、静态添加路由的解决方法

所谓静态添加路由，就是我们在开发Vue项目的时候，存放在router文件夹里面的index.js文件，里面的路由都是我们事先定义好，最后再由Vue编译挂载到项目上面的。

如果出现上述的问题，那么解决的方法很简单，就是不要存在name属性相同的路由即可：

这样子，就不会报warning。

三、动态添加路由的解决方法

那什么是动态添加路由呢？

this.$router.options.routes可以拿到初始化时配置的路由规则;this.$route 可以拿到当前路由信息 （包括路由路径，参数0）

我们在开发的过程中，尤其是后台管理系统，常常需要开发关于用户的权限管理，以此来判断用户可操作的界面菜单的选项。例如在用户登录的时候，编写以下代码：

addRouteList() {
	// 重新划分路由
	let routes = [login,register,...];
	// 为路由的初始值重新赋值
	this.$router.options.routes = routes;
	// 动态添加/更新路由
	this.$router.addRoutes(this.$router.options.routes);
}

然后退出登录的时候，把动态添加的部分路由去掉：

addRouteList() {
	// 重新划分路由,只保留登录注册
	let routes = [login,register];
	// 为路由的初始值重新赋值
	this.$router.options.routes = routes;
	// 动态添加/更新路由
	this.$router.addRoutes(this.$router.options.routes);
}

至此，动态添加路由已经完成，但是会存在我们文章开头发现的那个warning，凡是在第一次动态添加过的路由，二次动态添加的时候，全部都会出现这些（这里尚不清楚是什么原因，所以希望官方在新版本可以解决这个问题）。但功能逻辑操作上，一切都没有问题。所以我们接下来需要完善一下，解决命名重复的问题。

在router/index.js文件中，键入以下代码：

router.$addRoutes = (params) => {
	router.matcher = new Router({mode: 'history'}).matcher
	router.addRoutes(params)
}

重新编译，然后就不会出现warning了。