Vue?Router如何刷新當前頁面

更新時間：2023年10月25日 09:34:20 作者：Leo_DLi

Vue項目,?在實際工作中,?有些時候需要在?加載完某些數(shù)據(jù)之后對當前頁面進行刷新,?這篇文章主要為大家介紹了三種常用方法,需要的可以參考一下

一、reload 直接刷新頁面

window.location.reload();
$router.go(0);

相當于按了 F5, 因此缺點也很明顯, 體驗感不佳, 因為要加載所有頁面資源相對較慢, 比較耗時.

二、Vue Router 刷新當前頁面

這個時候, 我們通過 $router.push 一個 refresh 路由的形式實現(xiàn), 具體步驟如下:

步驟一:

新建一個 vue 文件, 文件中代碼如下 ( 僅需要如下代碼即可 ) :

<template>
  <div></div>
</template>
 
<script >
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.fullPath);
    });
  },
  setup() {}
}
</script>

步驟二:

在你的路由文件中, 配置上述文件路由, 示例代碼:

routes 數(shù)組中直接添加就行

{
    path: '/refresh',
    name: 'refresh',
    component: () => import('步驟一中創(chuàng)建文件的路徑')
  },

步驟三:

在目標位置, 使用 $router.push 上述路由即可, 示例代碼:

$router.push({
    name: 'refresh',
});

以上三步, 結束!

三、依賴注入方式實現(xiàn) (即, provide/inject )

中心思想: 通過 v-if 來切換 router-view 的顯示/隱藏從而實現(xiàn)重新加載組件的目的. 步驟如下.

步驟一:

修改路由出口文件 ( 我測試時是在 App.vue 文件中加的 <router-view /> ), 通過 provide 提供一個刷新方法給后代組件.

注意: 我的Demo中沒有測試路由嵌套的場景, 如果你是路由嵌套, 只想刷新嵌套的子路由, 那在這一步修改的就應該是子路由出口文件.

核心代碼如下:

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <router-view v-if="isRefreshFlag"></router-view>
  </div>
</template>
<script setup>
import { ref, nextTick, provide } from "vue";
 
const isRefreshFlag = ref(true)
function reloadPage() {
  isRefreshFlag.value = false
  nextTick(() => {
    isRefreshFlag.value = true
  })
}
provide("reloadPage", reloadPage)
 
</script>
 
<style>
</style>

步驟二:

在目標組件的目標位置, 通過 inject 調(diào)用步驟一中的 reloadPage() 方法. 示例代碼:

<template>
  <div>
    ...
    <button @click="refreshPage">刷新頁面</button>
  </div>
</template>
<script setup>
import { inject } from "vue";
 
const reloadPage = inject("reloadPage");
 
function refreshPage() {
  reloadPage();
}
 
</script>
 
<style>
</style>

以上兩步, 結束!

以上三種方式, 親測有效, 不過是 Vue 3 的代碼風格, Vue 2 請自行轉換.

到此這篇關于Vue Router如何刷新當前頁面的文章就介紹到這了,更多相關Vue Router刷新頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: