vue路由跳槽,控制台报错

如果你使用 this.$router.push 跳转页面时候报错,那么你就来对地方了,这篇文章就是解决Avoided redundant navigation to current location问题、并且为你解析原因和多种解决方式

解决方式:

  • 1、为Promise添加必填的回调函数,这种方式缺点: 每个跳转都要手写回调函数
this.$router.push({
   name: 'Dashboard',
   params: params
 }, () => {})
  • 2、使用path + params 组合,这种方式缺点: url能看到具体参数,以及不适合传复杂对象
this.$router.push({
   path: 'Dashboard',
   query: params
 })
  • 3、覆盖vue-router插件的原型链上面的 push 方法
import Router from 'vue-router'
Router.prototype.push = function push(location) {
	call(this, location).catch(err => err)
}

报错原因:

  • 由于新版本 vue-router 编程式跳转引入了新概率,Promise , 也是说 pusht和replace 都是Promise类型了。而Promise的回调函数,resolve,reject。必须传其中一个。否则会报错。
  • $router.push 也是这样,因为它成了 Promise函数了,我们就必须得穿回调函数了

报错过程描述:

  • 当 push 跳转成功之后,继续重复跳转同一个页面,此时控制台会报错;

额外 - vue跳转路由大体有2种方式:

使用声明式,路由标签跳转时不会出现此问题,那么什么pushreplace会报错呢?

  • 声明式跳转:即 router-link 标签跳转
  • 编程式跳转:即 $router.push 或者$router.replace$router.go
声明式编程式
<router-link :to="...">router.push(...)
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐