vue路由动态添加重复警告重复

最新推荐文章于 2025-03-10 17:17:54 发布

似月是你

最新推荐文章于 2025-03-10 17:17:54 发布

阅读量977

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zhy04/article/details/127806897

版权

本文介绍了如何在Vue.js中使用createRouter和resetRouter方法来动态添加路由，同时避免控制台关于重复路由的警告。通过在permission.js中先调用resetRouter清除原有路由再添加新的访问权限路由，确保权限管理的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态添加路由后，控制台警告重复，在router.js中添加下面代码

const createRouter = () => new Router({
	 mode: 'history',
	 routes: constantRoutes
})
const router = createRouter()
export function resetRouter () {
	const newRouter = createRouter()
	router.matcher = newRouter.matcher
}
export default router

addRoutes()方法是router自带的原生方法，是动态添加路由的，它并没有删除之前路由中原有的路由所以在permission.js中引入router，并且添加在addRoutes之前resetRouter

import router,{resetRouter} from './router'
store.dispatch('GenerateRoutes').then(accessRoutes => {
    // 根据roles权限生成可访问的路由表
	resetRouter()
	router.addRoutes(accessRoutes)// 动态添加可访问路由表
})