Vue同一路由強制刷新頁面的實現過程

Posted on by

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！

到此這篇關於VUE同一路由強制刷新頁面的文章就介紹到這瞭,更多相關vue路由強制刷新頁面內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：