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

傷城~ 2022-08-31 02:17 540阅读 0赞

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

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

`在当前商品详情页面跳转到另一个商品的详情页面，此时，路由相同，参数id不同`  
![在这里插入图片描述][2e27524c053beb0ac17d90d46dd3a88d.png]

## `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][Uncaught _in promise_ NavigationDuplicated_ Avoided redundant navigation to current location_ _productDetail_ _https_www.cnblogs.com_jiduoduo_p_14517382.html]

![在这里插入图片描述][4b11b034598dcb29b4794ddee102575a.png]  
解决办法：

#### `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`.  
![在这里插入图片描述][629aba1da0443bef5bd36724176471cc.png]  
此时，后端同事要求说：跳转到其他商品详情时，要保留前一个商品的路由，也就是让我不要路由跳转时采用`replace`，要使用`push`，因此路由跳转代码如下：

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

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

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

百度后，发现了大神的解决办法：  
[大神解决同一个路由回退时，页面不刷新问题：https://www.cnblogs.com/caihua0405/p/11265515.html][https_www.cnblogs.com_caihua0405_p_11265515.html]  
![在这里插入图片描述][30aa17a4c1da9ad9cc28a7af77e44b67.png]  
大神给出了两个办法：

#### 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`。  
![在这里插入图片描述][58d301742fc19adee81e10d727b4231e.png]  
问题解决！！！

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

[2e27524c053beb0ac17d90d46dd3a88d.png]: /images/20220829/fb45885213de473cad67278b77818458.png
[Uncaught _in promise_ NavigationDuplicated_ Avoided redundant navigation to current location_ _productDetail_ _https_www.cnblogs.com_jiduoduo_p_14517382.html]: https://www.cnblogs.com/jiduoduo/p/14517382.html
[4b11b034598dcb29b4794ddee102575a.png]: /images/20220829/1ba82bd8d3344ec49bc4269d2c3bbaf5.png
[629aba1da0443bef5bd36724176471cc.png]: /images/20220829/2641f1244ea24d4aa3e3444b6d6df488.png
[https_www.cnblogs.com_caihua0405_p_11265515.html]: https://www.cnblogs.com/caihua0405/p/11265515.html
[30aa17a4c1da9ad9cc28a7af77e44b67.png]: /images/20220829/2671aacc1ef945fd80aecdbbb7cc0e62.png
[58d301742fc19adee81e10d727b4231e.png]: /images/20220829/29a35ef9f7c74661987cd2ef0ad458df.png