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

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

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

利用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. 到需要刷新的頁面進行引用，使用inject導入引用reload，然后直接調(diào)用即可。

在這里插入圖片描述

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

在這里插入圖片描述

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

您可能感興趣的文章:

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