我们都知道,vue-router中设置了404页面之后,使用path跳转不存在的路由会重定向到404页面,但是使用Name做路由跳转,跳转一个并不存在的路由,就不会触发404页面。
原因是vue-router没有对这种情况做什么处理:只是简单的在控制台抛出警告
当前网上的应对方案是1. 不使用name来跳转 2. 在守卫处判断to.matched.length
方法1限制了我们书写代码的规则,减少了我们传参的方式不可取
方法2则在很多场合会误判,比如在刚登录的时候to.matched.length是空的
利用vue-router会在跳转不存在name路由时会在控制台抛出警告的原理。
所以我使用了第三种方式:监听warn
import router from '@/router'
const sourceWarn = window.console.warn
// 复写warn方法方便检查由于使用name跳转无法监控404的问题
window.console.warn = function (...rest) {
const args = Array.from(rest)
if (args[0] && args[0].includes('Route with name') && args[0].includes('does not exist')) {
console.log('预备跳转404')
setTimeout(() => {
router.push('/404')
}, 0)
}
sourceWarn(...rest)
}
本文章借鉴“天空之蓝砖”,原文地址:vue-router 使用name跳转时,404失效的问题_huangssssx的专栏-CSDN博客
仅用作自己收藏方便查找,侵删(*^▽^*)~