vue NavigationDuplicated: Avoided redundant navigation to current location
NavigationDuplicated: Avoided redundant navigation to current location:
·
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种方式:
使用声明式,路由标签跳转时不会出现此问题,那么什么push
和replace
会报错呢?
- 声明式跳转:即 router-link 标签跳转
- 编程式跳转:即
$router.push
或者$router.replace
和$router.go
声明式 | 编程式 |
---|---|
<router-link :to="..."> | router.push(...) |
更多推荐
已为社区贡献2条内容
所有评论(0)