快捷導(dǎo)航

vue實(shí)現(xiàn)路由不變的情況下，刷新頁(yè)面操作示例

更新時(shí)間：2020年02月02日 08:45:12 作者：不想寫(xiě)代碼的碼農(nóng)

這篇文章主要介紹了vue實(shí)現(xiàn)路由不變的情況下，刷新頁(yè)面操作,結(jié)合實(shí)例形式分析了vue路由不變的情況下刷新頁(yè)面具體原理、操作方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了vue實(shí)現(xiàn)路由不變的情況下，刷新頁(yè)面操作。分享給大家供大家參考，具體如下：

背景1：在vue寫(xiě)的后臺(tái)管理項(xiàng)目中，經(jīng)常會(huì)有增、刪、改、查的操作，這些操作只是跟用接口跟后臺(tái)交互下

既然用接口交互，那肯定就是axios的異步請(qǐng)求，那么就是說(shuō)后臺(tái)數(shù)據(jù)發(fā)生了改變，但是前臺(tái)的數(shù)據(jù)并沒(méi)有實(shí)時(shí)的更新（每次操作完后臺(tái)把列表數(shù)據(jù)重新返給你例外，但是這樣的話每次交互的數(shù)據(jù)量就偏大了）

背景2：在使用動(dòng)態(tài)路由配置 /detail/:id 這樣的情況下，由于 router-view 是復(fù)用的，單純的改變 id 的值并不會(huì)刷新 router-view

所以就要想一個(gè)辦法，讓后臺(tái)執(zhí)行完操作后，給前臺(tái)返一個(gè)操作結(jié)果，然后前臺(tái)手動(dòng)刷新頁(yè)面

一開(kāi)始我想到的是用 window.location.reload() 或者 this.$router.go(0) 這兩個(gè)方法，但是后來(lái)發(fā)現(xiàn)這兩個(gè)方法會(huì)有短暫的白屏?xí)r間，用戶體驗(yàn)并不太好，所以就放棄了，看了下別人的做法，整理下面兩種方法：

一、用中轉(zhuǎn)站的方式

這種方式意思就是讓每次操作完成以后，都讓路由跳轉(zhuǎn)到這個(gè)中轉(zhuǎn)站頁(yè)面，然后這個(gè)頁(yè)面獲取到進(jìn)來(lái)路由的路徑再返回去就可以了，這種方式可以作為解決方法之一，普遍用的還是第二種。

二、provide / inject 的方式

這種方式，就是讓通過(guò) provide 讓 App.vue 為所有子孫頁(yè)面注入一個(gè) reload 的方法，然后在需要使用的頁(yè)面，通過(guò) inject 注入即可，代碼如下：

App.vue

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

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

子頁(yè)面

export default {
  name: 'children',
  inject: ['reload'],
  data(){
    return {}
  }
  methods: {
    delData(){
      //在axios成功的回調(diào)里面
      this.reload();
    }
  }
}

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vuex中的Mutation使用詳解
這篇文章主要介紹了Vuex中的Mutation使用詳解,當(dāng)我們想修改狀態(tài)值,想傳入的值進(jìn)而進(jìn)行修改時(shí),你可以向 store.commit 傳入額外的參數(shù),即 mutation 的載荷,需要的朋友可以參考下
2023-11-11
Vue3源碼分析調(diào)度器與watch用法原理
這篇文章主要為大家介紹了Vue3源碼分析調(diào)度器與watch用法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
vue-cli常用設(shè)置總結(jié)
本文給大家總結(jié)了vue-cli常用設(shè)置,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-02-02
Vue.js原理分析之nextTick實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue.js原理分析之nextTick實(shí)現(xiàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
vue實(shí)現(xiàn)按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)按鈕切換圖片，正向反向以及順序切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
Vue2項(xiàng)目中對(duì)百度地圖的封裝使用詳解
近期項(xiàng)目需求相關(guān)地圖限定使用百度地圖,功能比較簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目中對(duì)百度地圖的封裝使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
使用VitePress搭建及部署vue組件庫(kù)文檔的示例詳解
這篇文章主要介紹了使用VitePress搭建及部署vue組件庫(kù)文檔,本文以element-plus作為示例來(lái)搭建一個(gè)文檔，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
關(guān)于Vue中this.$set的正確使用
我們?cè)陧?xiàng)目開(kāi)發(fā)的過(guò)程中，經(jīng)常會(huì)遇到這種情況：為data中的某一個(gè)對(duì)象添加一個(gè)屬性，我們?cè)撊绾谓鉀Q這個(gè)問(wèn)題呢，下面小編給大家?guī)?lái)了Vue中this.$set的正確使用，感興趣的朋友跟隨小編一起看看吧
2022-12-12
vue+elementui(對(duì)話框中form表單的reset問(wèn)題)
這篇文章主要介紹了vue+elementui(對(duì)話框中form表單的reset問(wèn)題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05