vue——同一个路由传参不同跳转，页面不刷新问题解决

好久都没有写vue-cli创建的项目了，现在一写，发现了好多坑。

今天遇到一个路由跳转的问题：
这个是非常常见的一个场景：

在当前商品详情页面跳转到另一个商品的详情页面，此时，路由相同，参数id不同

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/productDetail"——报错解决

结果我在使用this.$router.replace({path:'/productDetail',query:{id:xxx}})的时候，报错了：
报错信息如下：
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/productDetail"

百度后发现报错原因是：
跳转到同一个路由时，出现这个报错

参考大神链接如下：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/productDetail” 报错解决办法：https://www.cnblogs.com/jiduoduo/p/14517382.html

解决办法：

router/index.js文件中添加以下内容

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

注意：上面代码中的Router要跟此页面中引入的vue-router的别名要保持一致。如果引入的vue-router的别名为VueRouter，则代码不能直接使用上面的Router,应该改为VueRouter.

此时，后端同事要求说：跳转到其他商品详情时，要保留前一个商品的路由，也就是让我不要路由跳转时采用replace，要使用push，因此路由跳转代码如下：

this.$router.push({
 path: "/productDetail",
  query: {
    id: xxxx,
  },
});

然后通过点击网页的回退按键，可以回退到之前的商品详情，此时有出现了新的问题。路由回退了，但是页面没有刷新，还是展示的新的商品信息。

同一个路由回退时，页面不刷新问题——解决

百度后，发现了大神的解决办法：
大神解决同一个路由回退时，页面不刷新问题：https://www.cnblogs.com/caihua0405/p/11265515.html

大神给出了两个办法：

1.通过watch监听路由——失败

watch: {
   $route: {
     handler() {
       this.query = this.$route.query;
       console.log("路由变化了", this.query);
     },
     deep: true,
   },
 },

但是实际操作时，发现并没有通过watch监听到路由的变化，也就是说同一个路由，参数不同时，无法通过watch监听路由。

2.router-view 添加key——解决

router-view就是要添加路由页面的地方，加个key,当key不同时，就会刷新。此时为了保证同一个路由，参数不同时也要刷新，可以将$router.fullPath设置为key。

问题解决！！！

如果仅仅是为了刷新当前页面，路由和参数都不改变的时候，可以通过this.$router.go(0)的方式来进行刷新。