快捷導(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刷新效果類似，頁(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)文章

vue3?中ref和reactive的區(qū)別講解
如果在template里使用的是ref類型的數(shù)據(jù),?那么Vue會(huì)自動(dòng)幫我們添加.value，如果在template里使用的是reactive類型的數(shù)據(jù),?那么Vue不會(huì)自動(dòng)幫我們添加.value，這篇文章主要介紹了vue3?中ref和reactive的區(qū)別,需要的朋友可以參考下
2022-12-12
vue實(shí)現(xiàn)在一個(gè)方法執(zhí)行完后執(zhí)行另一個(gè)方法的示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)在一個(gè)方法執(zhí)行完后執(zhí)行另一個(gè)方法的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue中的封裝常用工具類
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方
最近的項(xiàng)目需要用到vue/cli,但是用cnpm安裝vue/cli的時(shí)候報(bào)錯(cuò)了,下面這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方式,需要的朋友可以參考下
2022-11-11
VUE學(xué)習(xí)之Element-ui文件上傳實(shí)例詳解
今天進(jìn)行了element?文件上傳組件的運(yùn)用,寫一下心得,下面這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)之Element-ui文件上傳的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
form?表單驗(yàn)證是異步問(wèn)題記錄(推薦)
這篇文章主要介紹了form?表單驗(yàn)證是異步問(wèn)題記錄,通過(guò)實(shí)例代碼介紹了Promise.all 和 Promise.allSettled 區(qū)別，需要的朋友可以參考下
2023-01-01
vue多頁(yè)面開(kāi)發(fā)和打包正確處理方法
這篇文章主要介紹了vue多頁(yè)面開(kāi)發(fā)和打包的正確處理方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-04-04
Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn)
本文主要介紹了Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
淺析對(duì)Vue中keep-alive緩存組件的理解
<keep-alive> 是一個(gè)抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會(huì)重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時(shí),其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下
2024-01-01
在 Typescript 中使用可被復(fù)用的 Vue Mixin功能
這篇文章主要介紹了在 Typescript 中使用可被復(fù)用的 Vue Mixin功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-04-04