快捷導(dǎo)航

Vue實(shí)現(xiàn)頁面的局部刷新(router-view頁面刷新)

更新時間：2021年12月30日 16:12:40 作者：小城聽風(fēng)雨

本文主要介紹了Vue實(shí)現(xiàn)頁面的局部刷新(router-view頁面刷新)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

利用Vue里面的provide+inject組合

首先需要修改App.vue。

<template>
  <!-- 公司管理 -->
  <div class="companyManage">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "companyManage",
  watch: {},
  provide() {
    return {
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick( () => {
        this.isRouterAlive = true;
      })
    }
  },
  mounted() {}
};
</script>

<style scoped>
.companyManage {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
}
</style>

在這里插入圖片描述

2. 到需要刷新的頁面進(jìn)行引用，使用inject導(dǎo)入引用reload，然后直接調(diào)用即可。

在這里插入圖片描述

inject:["reload"],
this.reload();

在這里插入圖片描述

到此這篇關(guān)于Vue實(shí)現(xiàn)頁面的局部刷新(router-view頁面刷新)的文章就介紹到這了,更多相關(guān)Vue 頁面局部刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中多附件上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了vue中多附件上傳的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue中多個倒計(jì)時實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue中多個倒計(jì)時實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
element基于el-form智能的FormSmart表單組件
本文主要介紹了element基于el-form智能的FormSmart表單組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
vue中使用geobuf的示例詳解
這篇文章主要介紹了vue中使用geobuf的示例詳細(xì)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-04-04
詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案
這篇文章主要介紹了詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案，非常具有實(shí)用價值，需要的朋友可以參考下
2017-09-09
利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的全過程
vite2已經(jīng)出來一段時間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的相關(guān)資料,需要的朋友可以參考下
2021-08-08
Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作
vue項(xiàng)目打包過后發(fā)現(xiàn)地址錯了或者發(fā)布到別的服務(wù)器發(fā)現(xiàn)請求的地址不對,每次都要去重新打包,太浪費(fèi)時間,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作,需要的朋友可以參考下
2022-08-08
如何為老vue項(xiàng)目添加vite支持詳解
Vite是一個開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項(xiàng)目添加vite支持的相關(guān)資料,需要的朋友可以參考下
2021-09-09
vue踩坑記之npm?install報錯問題解決總結(jié)
當(dāng)你跑起一個項(xiàng)目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報錯問題解決的相關(guān)資料,需要的朋友可以參考下
2022-06-06
基于Vue3+WebSocket實(shí)現(xiàn)實(shí)時文件傳輸監(jiān)控系統(tǒng)
WebSocket是一種在客戶端和服務(wù)器之間進(jìn)行雙向通信的網(wǎng)絡(luò)協(xié)議,它通過建立持久性的、全雙工的連接,允許服務(wù)器主動向客戶端發(fā)送數(shù)據(jù),本文小編給大家介紹了基于Vue3+WebSocket實(shí)現(xiàn)實(shí)時文件傳輸監(jiān)控系統(tǒng),需要的朋友可以參考下
2025-03-03