解决 vue-router 报错:Navigation cancelled from “/...“ to “/...“ with a new navigation

简介: 解决 vue-router 报错:Navigation cancelled from “/...“ to “/...“ with a new navigation

问题:

项目中需要对用户是否登录进行判断,如果用户未登录或者 token 过期就需要跳转登录页面,进行登录验证。所以需要做一个拦截,在跳转登录页面时报了一个错。

报错如下图所示:

2020062310470442.png原因:

这个错误是 vue-router 内部错误,没有进行 catch 处理,导致的编程式导航跳转问题,向同一地址跳转时会报错的情况(push 和replace 都会导致这个情况的发生)。

解决:

方案一:

安装 vue-router 3.0 以下版本,先卸载 3.0 以上版本然后再安装旧版本 。

npm install vue-router@2.8.0 -S

方案二:

针对于路由跳转相同的地址添加 catch 捕获一下异常。

this.$router.push({path:'/register'}).catch(err => { console.log(err) })

方案三:

在路由 router 里面加上以下这段代码

// 解决编程式路由往同一地址跳转时会报错的情况
const originalPush = VueRouter.prototype.push;
const originalReplace = VueRouter.prototype.replace;
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject);
  return originalPush.call(this, location).catch(err => err);
};
//replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalReplace.call(this, location, onResolve, onReject);
  return originalReplace.call(this, location).catch(err => err);
};

相应文件及位置:

2020062310470442.png

拓展

Vue Router中 router.push、router.replace、router.go 的区别

router.push(location) 相当于 window.history.pushState
想要导航到不同的 URL,则使用 router.push 方法。
这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
router.replace(location) 相当于 window.history.replaceState
跟 router.push 很像,区别:它不会向 history 添加新记录,而是替换掉当前的 history 记录,点击返回会跳转到上上个页面。
router.go(n) 相当于 window.history.go
向前或者向后跳转n个页面,n可为正整数或负整数。可以通过 window.history.length 得到历史记录栈中一共有多少页。

Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。

传送门:Vue Router 中实现在新窗口打开页面

相关文章
|
6月前
|
JavaScript
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?
|
6月前
|
JavaScript
Vue报错\page\ComplianceTraceReport\index.vue{ parser: “babylon“ } is deprecated; we now treat it 怎么解决?
Vue报错\page\ComplianceTraceReport\index.vue{ parser: “babylon“ } is deprecated; we now treat it 怎么解决?
|
6月前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
152 3
|
5月前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 "ERROR Invalid options in vue.config.js: ‘server’ is not allowed" 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
275 1
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
|
4月前
|
前端开发
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
Vue2和Vue3的区别,在setup中定义的数据,在data(){return中能否定义到},在setup我们不能用this,写在return中可以用this,但是不能在setup否则会报错
|
2月前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
83 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
2月前
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
1月前
|
JavaScript
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
225 0
|
3月前
|
JavaScript
VUE——uuid引入报错
VUE——uuid引入报错
56 0