针对VUE3+TS+VUE-ROUTER4 出现[Vue Router warn]: No match found for location with path “/system/perm“
针对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路由导致空白页的问题。
这个方法目前来说,是本人想到的能解决的办法。如果还有其他方法,请评论区留下宝贵的方法。学习学习!
更多推荐
所有评论(0)