Vue跳转同一页面只是地址栏参数变化时，地址栏变化，界面未刷新

1.问题描述：

当前所处路由：/test?id=1, 点击按钮后，地址栏变化为：/test?id=2, 但是视图没有更新
报错如下所示：

Uncaught (in promise) NavigationDuplicated: Avoided redundant
navigation to current location: "/test?id=2

2.解决报错需要在router.js文件中添加如下代码：

const oldPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  oldPush.call(this,location).catch(err => err)
}

3.解决视图不刷新的问题：
需要借助于provide和reject
(1)首选我们需要在app.vue中添加一个表示变量用以控制路由视图组件的渲染：

<template>
  <div id="app">
    <router-view v-if="isActive"/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isActive: true
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload () {
      this.isActive = false
      this.$nextTick(function () {
        this.isActive = true
      })
    }
  }
}
</script>

（2）在需要更新的组件中注入对应的函数

export default {
  inject: ['reload'], // 注入函数
  }

(3)在需要更新的组件中通过watch监听路由变化，然后刷新页面：

export default {
  inject: ['reload'], // 注入函数
  watch: {
	 '$route': function (val) {
		 this.reload()
	  }
  }
}