Vue同一路由強制刷新頁面如何實現(xiàn)

發(fā)布時間：2022-08-15 16:19:56 來源：億速云閱讀：1677 作者：iii 欄目：開發(fā)技術

這篇文章主要講解了“Vue同一路由強制刷新頁面如何實現(xiàn)”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue同一路由強制刷新頁面如何實現(xiàn)”吧！

1. 思路

使用this.$router.replace()，跳到一個空白頁，然后this.$router.replace()重新跳回來
使用this.$router.replace()的原因是，其實跟this.$router.push()效果一樣，但是this.$router.replace()不會記錄到history里，不留痕跡
甚至不用打開空白頁，直接用beforeRouteEnter攔截跳回原來頁面

2. 實現(xiàn)過程

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 當你想刷新當前頁面的時候，可以調(diào)用下面這段代碼

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

感謝各位的閱讀，以上就是“Vue同一路由強制刷新頁面如何實現(xiàn)”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Vue同一路由強制刷新頁面如何實現(xiàn)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！

向AI問一下細節(jié)

Vue同一路由強制刷新頁面如何實現(xiàn)

1. 思路

2. 實現(xiàn)過程

2.1 新建一個名為refresh.vue的文件

2.2 在refresh.vue里添加 beforeRouteEnter

2.3 在路由文件里，加上refresh 的路由

2.4 當你想刷新當前頁面的時候，可以調(diào)用下面這段代碼

猜你喜歡

最新資訊

相關推薦

相關標簽

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

2.4 當你想刷新當前頁面的時候，可以調(diào)用下面這段代碼