解决:VUE同一路由强制刷新页面

1. 思路

  • 使用this.$router.replace(),跳到一个空白页,然后this.$router.replace()重新跳回来
  • 使用this.$router.replace()的原因是,其实跟this.$router.push()效果一样,但是this.$router.replace()不会记录到history里,不留痕迹
  • 甚至不用打开空白页,直接用beforeRouteEnter拦截跳回原来页面

2. 实现过程

2.1 新建一个名为refresh.vue的文件

2.2 在refresh.vue里添加 beforeRouteEnter

<template> </template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.path)
      // 跳到该路由页面后,再替换为from.path来源路径
    })
  }
}
</script>

2.3 在路由文件里,加上refresh 的路由

    {
      path: '/refresh',
      component: resolve => require(['@/pages/refresh'], resolve),
      meta: {
        title: '用于同路由刷新'
      }
    }

2.4 当你想刷新当前页面的时候,可以调用下面这段代码

this.$router.replace('/refresh')

over,enjoy!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值