溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue實現路由不變的情況下，刷新頁面操作。分享給大家供大家參考，具體如下：
背景1：在vue寫的后臺管理項目中，經常會有增、刪、改、查的操作，這些操作只是跟用接口跟后臺交互下
既然用接口交互，那肯定就是axios的異步請求，那么就是說后臺數據發生了改變，但是前臺的數據并沒有實時的更新（每次操作完后臺把列表數據重新返給你例外，但是這樣的話每次交互的數據量就偏大了）
背景2：在使用動態路由配置 /detail/:id 這樣的情況下，由于 router-view 是復用的，單純的改變 id 的值并不會刷新 router-view
所以就要想一個辦法，讓后臺執行完操作后，給前臺返一個操作結果，然后前臺手動刷新頁面
一開始我想到的是用 window.location.reload() 或者 this.$router.go(0) 這兩個方法，但是后來發現這兩個方法會有短暫的白屏時間，用戶體驗并不太好，所以就放棄了，看了下別人的做法，整理下面兩種方法：
一、用中轉站的方式
這種方式意思就是讓每次操作完成以后，都讓路由跳轉到這個中轉站頁面，然后這個頁面獲取到進來路由的路徑再返回去就可以了，這種方式可以作為解決方法之一，普遍用的還是第二種。
二、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成功的回調里面
this.reload();
}
}
}
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
