快捷導(dǎo)航

Vue?Router如何刷新當(dāng)前頁(yè)面

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

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

一、reload 直接刷新頁(yè)面

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

相當(dāng)于按了 F5, 因此缺點(diǎn)也很明顯, 體驗(yàn)感不佳, 因?yàn)橐虞d所有頁(yè)面資源相對(duì)較慢, 比較耗時(shí).

二、Vue Router 刷新當(dāng)前頁(yè)面

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

步驟一:

新建一個(gè) 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)建文件的路徑')
  },

步驟三:

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

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

以上三步, 結(jié)束!

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

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

步驟一:

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

注意: 我的Demo中沒(méi)有測(cè)試路由嵌套的場(chǎng)景, 如果你是路由嵌套, 只想刷新嵌套的子路由, 那在這一步修改的就應(yīng)該是子路由出口文件.

核心代碼如下:

<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>

步驟二:

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

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

以上兩步, 結(jié)束!

以上三種方式, 親測(cè)有效, 不過(guò)是 Vue 3 的代碼風(fēng)格, Vue 2 請(qǐng)自行轉(zhuǎn)換.

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

您可能感興趣的文章: