vue 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(...)