针对VUE3+TS+VUE-ROUTER4 出现[Vue Router warn]: No match found for location with path “/system/perm“

这个问题困扰了两天。添加动态路由后。使用动态路由地址直接访问，或者刷新就会出现[Vue Router warn]: No match found for location with path "/system/perm" 警告。虽然不影响，但是确实存在问题。

环境 Vue3 + vue-router4 

原因

首先要明白一个思路。比如/system/perm 是动态路由，如果直接访问。动态路由一开始肯定不存在，后面才会从服务器读取并添加。所以才会出现这个警告。

经过网上百度，各种方法不是抄袭的就是根本答非所问。经过自己研究发现一个方法很好的解决

解决方法：

首先添加一个全匹配路由地址 * (这个版本不给用* 了，可以使用/:W+替代) 然后重定向到/404路由，(404的路由代码就不在这里贴出来了)

{
    path: '/:W+',
    component: BaseLayout,
    redirect: '/404',
    hidden: true
  }

这时候发现警告没了。但是访问的动态路由全部重定向到404了。

下一个步骤很关键，在守卫路由处。完成动态路由的添加后加入以下代码。

if (to.path == '/404' && to.redirectedFrom != undefined){
   next({path:to.redirectedFrom?.fullPath,replace:true})
}else {
   next({...to,replace:true})
}

代码解释

判断要去的路由是404，且来源的路由不等于空。则跳转到来源路由，反之则跳转到要去的路由。因为设置了全路由匹配。一开始访问动态路由肯定会去404. 那么在添加完动态路由后，再回到之前的路由即可。后面这个to.redirectedFrom != undefined 主要是为了防止直接访问404路由导致空白页的问题。

这个方法目前来说，是本人想到的能解决的办法。如果还有其他方法，请评论区留下宝贵的方法。学习学习！