vue 跳转至当前路由,并刷新页面

携带不同参数跳转至当前路由,刷新页面并获取该参数

借助空页面实现

例如:由 /detail?id=1 跳转至 /detail?id=2

detail.vue

export default {
  methods: {
    test() {
      this.$router.push({
        path: '/empty',
        query: {
          router: '/detail?id=2'
        }
      })
    }
  },

  created() {
    console.log(this.$route.query);
  }
}

empty.vue 空白页面(该页面需要再路由表里添加对应的路由)

export default {
  created() {
    // 重定向
    this.$router.replace(this.$route.query.router)
  }
}

仅跳转至当前路由,参数不变

使用router.go可完美解决

注意:使用这种方法,原有的路由会消失(被替换)

test() {
  this.$router.go(0)
}
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,当我们需要进行页面跳转并刷新的时候,可以采用以下解决办法。首先,在需要页面刷新的地方,我们可以使用`this.$router.push('/emptyPage')`来跳转到一个空白页。然后,在空白页的`emptyPage.vue`文件中,我们可以使用`beforeRouteEnter`钩子来控制页面跳转,从而实现刷新的效果。具体的代码如下: ```javascript // 在需要页面刷新的地方 this.$router.push('/emptyPage'); // 在emptyPage.vue文件中 beforeRouteEnter(to, from, next) { next(vm => { vm.$router.replace(from.path); }); } ``` 这样,当我们进行页面跳转时,会先跳转到空白页,然后在空白页的`beforeRouteEnter`钩子中,通过`vm.$router.replace(from.path)`将页面重新跳转回原来的路径,从而实现页面的刷新效果。这种方法可以避免整个浏览器进行刷新加载,减少页面闪烁,提升用户体验。另外,我们还可以使用`name`或`path`来进行跳转,具体的代码如下: ```javascript // 通过name跳转 this.$router.push({ name: '/redirect/user' }); // 通过path跳转 this.$router.push({ name: '/redirect/user/index' }); ``` 通过以上方法,我们可以在Vue中实现路由跳转刷新页面的需求。 #### 引用[.reference_title] - *1* [vue router跳转页面后刷新 跳转后的页面](https://blog.csdn.net/qq_21190847/article/details/107830211)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue关于页面刷新的几个方式](https://blog.csdn.net/weixin_45990864/article/details/123147531)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [VUE路由跳转刷新页面(框架层实现)](https://blog.csdn.net/qq_18984887/article/details/128300457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值