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

项目中遇到跳转详情,但是详情中侧边有小列表的存在,这样就是相当于从详情跳到详情,如果直接使用this. r o u t e r . p u s h 的方式,则会发现页面不会重新渲染,写在 c r e a t e d 和 m o u n t e d 内的方法并不会执行,解决这个问题的方式如下:路由监听一、 w a t c h :在方法里面还是使用 t h i s . router.push的方式,则会发现页面不会重新渲染,写在created和mounted内的方法并不会执行,解决这个问题的方式如下: 路由监听 一、watch: 在方法里面还是使用this. router.push的方式,则会发现页面不会重新渲染,写在createdmounted内的方法并不会执行,解决这个问题的方式如下:路由监听一、watch:在方法里面还是使用this.router.push进行跳转,但是添加路由监听:

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

到这里基本上可以使页面数据进行重新渲染了,但是连续点击同一条两次的话,则会报下面的错误:
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)
}

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

beforeRouteUpdate (to, from, next) {
    next();
    if (to.fullPath !== from.fullPath) {
        this.currentPage = this.$route.query.code;
    }
},

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

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值