Vue項目路由刷新的實現(xiàn)代碼

更新時間：2019年04月17日 08:26:23 作者：坤少卡卡

這篇文章主要介紹了Vue項目路由刷新的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

當vue單頁面需要替換參數(shù)并刷新頁面時，這個時候使用this.$router.push或this.$router.replace會發(fā)現(xiàn)路由改變了，但是頁面上的數(shù)據(jù)并沒有實時刷新。在網(wǎng)上找到了以下幾種方法，親測可用：

this.$router.go(0)

在具體頁面中，先通過this.$router.push或this.$router.replace替換路由，隨后調(diào)用this.$router.go(0)，頁面就會強制刷新，但是該強制刷新與F5刷新效果類似，頁面會有空白時間，體驗感不好；

provide/inject

首先在app.vue頁面中增加如下配置：

<template>
 <div id="app">
  <router-view v-if="isRouterAlive" />
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
  return {
   isRouterAlive: true
  }
 },
 provide() {
  return {
   reload: this.reload
  }
 },
 methods: {
  reload() {
   this.isRouterAlive = false
   this.$nextTick(() => {
    this.isRouterAlive = true
   })
  }
 }
}
</script>

然后在具體頁面中加上inject配置，具體如下：

 export default {
  name: 'orderAndRandom',
  
  // 就是下面這行
  inject: ['reload'],
  data() {},
  
  // 省略
 }

加上配置后，在調(diào)用this.$router.push或this.$router.replace替換路由后，再新增this.reload()就可以實現(xiàn)頁面內(nèi)數(shù)據(jù)刷新。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue三元運算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯)
這篇文章主要介紹了vue三元運算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue結(jié)合ElementUI實現(xiàn)數(shù)據(jù)請求和頁面跳轉(zhuǎn)功能(最新推薦)
我們在Proflie.vue實例中,有beforeRouteEnter、beforeRouteLeave兩個函數(shù)分別是進入路由之前和離開路由之后,我們可以在這兩個函數(shù)之內(nèi)進行數(shù)據(jù)的請求,下面給大家分享Vue結(jié)合ElementUI實現(xiàn)數(shù)據(jù)請求和頁面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧
2024-05-05
vue?+?electron應用文件讀寫操作
這篇文章主要介紹了vue?+?electron應用文件讀寫操作,如果要制作的應用并不復雜，完全可以將數(shù)據(jù)存儲在本地文件當中，然后應用就可以通過這些文件進行數(shù)據(jù)的讀寫，需要的朋友參考下吧
2022-06-06
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個vue實例從創(chuàng)建到銷毀的過程，就是這個vue實例的生命周期,在這個過程中，他經(jīng)歷了從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,那么這些過程中，具體vue做了些啥，我們今天來了解一下
2023-05-05
深入理解vue.js中$watch的oldvalue與newValue
這篇文章主要給大家介紹了關(guān)于vue.js中$watch的oldvalue與newValue的相關(guān)資料，文中通過示例代碼介紹的非常詳細，并且介紹了關(guān)于watch的其他測試，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。
2017-08-08
Vue中使用SVG-ICON的配置方法
在項目開發(fā)中,經(jīng)常會用到svg圖標,之前用的都是vue-svg-icon,接下來通過本文給大家介紹Vue中使用SVG-ICON的配置方法,感興趣的朋友跟隨小編一起看看吧
2024-02-02
淺談vue websocket nodeJS 進行實時通信踩到的坑
這篇文章主要介紹了淺談vue websocket nodeJS 進行實時通信踩到的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue前后端不同端口的實現(xiàn)方法
今天小編就為大家分享一篇Vue前后端不同端口的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue使用tracking實現(xiàn)人臉識別/人臉偵測完整代碼
作為一個AI模型,人臉識別涉及到多個技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實現(xiàn)人臉識別/人臉偵測的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-09-09
Vue3中Element Plus Table(表格)點擊獲取對應id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點擊獲取對應id方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10