快捷導(dǎo)航

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

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

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

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

this.$router.go(0)

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

provide/inject

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

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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