[Vue Router warn]: No match found for location with path “xxxxx“

最新推荐文章于 2024-08-12 17:39:14 发布

壹技绝尘

最新推荐文章于 2024-08-12 17:39:14 发布

阅读量1.8w

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_39962208/article/details/126969439

版权

本文介绍了在Vue项目中遇到的动态追加路由后出现'Vue Router warn': No match found for location with path的问题。分析了问题产生的原因，即在全局守卫beforeEach执行时，动态路由未被追加，导致matched为空，从而引发警告。解决方案是将404路由写入初始化的router文件，并正确设置全局守卫，确保刷新页面时能匹配到404，避免警告的出现。

摘要由CSDN通过智能技术生成

在vue项目中，大家做权限管理的时候，大部分是采用addRoute方案来实现。

在之前使用vue-router的时候，大家在动态追加完路由后，还要再追加一下404页面，如果在路由文件中直接写好404页面，那么刷新页面的时候就会跳转到404页面，原因在于，我们在加动态路由前，就配置了通配符404路由.改成动态添加过路由后，再最后push一下404通配符，这样就可以了。

路由全局守卫：

router.beforeEach(async (to, from, next) => {
   
    ...// 其他逻辑省略，只看addRoutes部分
    try {
   
        await store.dispatch('GetUserInfo')
        const res = await store.dispatch('getAsyncRoutes')
        const asyncRoutes = handleRoutes(res)
        router.addRoutes(asyncRoutes);
        router.