vue實現(xiàn)路由不變的情況下，刷新頁面操作示例
本文實例講述了vue實現(xiàn)路由不變的情況下，刷新頁面操作。分享給大家供大家參考，具體如下：
背景1：在vue寫的后臺管理項目中，經(jīng)常會有增、刪、改、查的操作，這些操作只是跟用接口跟后臺交互下
既然用接口交互，那肯定就是axios的異步請求，那么就是說后臺數(shù)據(jù)發(fā)生了改變，但是前臺的數(shù)據(jù)并沒有實時的更新（每次操作完后臺把列表數(shù)據(jù)重新返給你例外，但是這樣的話每次交互的數(shù)據(jù)量就偏大了）
背景2：在使用動態(tài)路由配置 /detail/:id 這樣的情況下，由于 router-view 是復(fù)用的，單純的改變 id 的值并不會刷新 router-view
所以就要想一個辦法，讓后臺執(zhí)行完操作后，給前臺返一個操作結(jié)果，然后前臺手動刷新頁面
一開始我想到的是用 window.location.reload() 或者 this.$router.go(0) 這兩個方法，但是后來發(fā)現(xiàn)這兩個方法會有短暫的白屏?xí)r間，用戶體驗并不太好，所以就放棄了，看了下別人的做法，整理下面兩種方法：
一、用中轉(zhuǎn)站的方式
這種方式意思就是讓每次操作完成以后，都讓路由跳轉(zhuǎn)到這個中轉(zhuǎn)站頁面，然后這個頁面獲取到進(jìn)來路由的路徑再返回去就可以了，這種方式可以作為解決方法之一，普遍用的還是第二種。
二、provide / inject 的方式
這種方式，就是讓通過 provide 讓 App.vue 為所有子孫頁面注入一個 reload 的方法，然后在需要使用的頁面，通過 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>
子頁面
export default {
name: 'children',
inject: ['reload'],
data(){
return {}
}
methods: {
delData(){
//在axios成功的回調(diào)里面
this.reload();
}
}
}
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了Vuex中的Mutation使用詳解,當(dāng)我們想修改狀態(tài)值,想傳入的值進(jìn)而進(jìn)行修改時,你可以向 store.commit 傳入額外的參數(shù),即 mutation 的 載荷,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了Vue3源碼分析調(diào)度器與watch用法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
本文給大家總結(jié)了vue-cli常用設(shè)置,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要給大家介紹了關(guān)于Vue.js原理分析之nextTick實現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)按鈕切換圖片，正向反向以及順序切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
近期項目需求相關(guān)地圖限定使用百度地圖,功能比較簡單,下面這篇文章主要給大家介紹了關(guān)于Vue2項目中對百度地圖的封裝使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue如何實現(xiàn)對請求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實現(xiàn)對請求參數(shù)進(jìn)行簽名問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個文檔，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
我們在項目開發(fā)的過程中，經(jīng)常會遇到這種情況：為data中的某一個對象添加一個屬性，我們該如何解決這個問題呢，下面小編給大家?guī)砹薞ue中this.$set的正確使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
vue+elementui(對話框中form表單的reset問題)
這篇文章主要介紹了vue+elementui(對話框中form表單的reset問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05