解决vue 跳转相同路由携带不同参数，页面不渲染问题

项目中遇到跳转详情，但是详情中侧边有小列表的存在，这样就是相当于从详情跳到详情，如果直接使用this.$router.push的方式，则会发现页面不会重新渲染，写在created和mounted内的方法并不会执行，解决这个问题的方式如下：路由监听一、watch：在方法里面还是使用this.$router.push进行跳转，但是添加路由监听：

watch: {
    // 利用watch方法检测路由变化：
    $route: function(to, from) {
        if (to.fullPath !== from.fullPath) {
            this.currentPage = this.$route.query.code;//获取参数
        }
    }
}
1
2
3
4
5
6
7
8

到这里基本上可以使页面数据进行重新渲染了，但是连续点击同一条两次的话，则会报下面的错误：
Uncaught (in promise) Error: Avoided redundant navigation to current location:“《当前页面的地址》”
为了解决这个问题，可以在路由文件内添加如下代码：

//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
1
2
3
4
5
6

二、beforeRouteUpdate
其实和方法一是一样的，也是监听路由，点击同样的路由报上面错误解决方式也是一样的。

beforeRouteUpdate (to, from, next) {
    next();
    if (to.fullPath !== from.fullPath) {
        this.currentPage = this.$route.query.code;
    }
},
1
2
3
4
5
6

即可实现跳转携带不同参数跳转相同路由的需求。