詳解vue之頁面緩存問題(基于2.0)
更新時間：2017年01月10日 09:05:42 作者：莎莉哇
本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
比如有一個列表頁面，然后列表每項都有一個詳情，之前用vue1.x的時候，頁面緩存基本沒有什么問題。
在vue2.0中出現(xiàn)了列表頁面是每次都重新加載數(shù)據(jù)，但是詳情頁面卻只在第一次加載的時候調用數(shù)據(jù)，如果返回到列表再進入詳情那么頁面是不會重新渲染頁面，可能是新手吧，這個問題困擾了我很久，一直沒有辦法解決……
根據(jù)vue-router的官方文檔所說，
watch: {
// 如果路由有變化，會再次執(zhí)行該方法
'$route': 'fetchData'
}
按照這樣寫了，但是頁面還是沒有渲染
.
.
.
于是就想啊想，想啊想……
以為是路由沒有變，我就在頁面路由后面加何種參數(shù)包括時間戳
但是都沒有解決這個問題
……
后來經(jīng)過多次嘗試終于找到問題所在
watch 方法檢測路由變化確實生效了，但是頁面有些關鍵數(shù)據(jù)沒有清空還是緩存的上一次的數(shù)據(jù)，所以導致每次加載頁面都不會重新渲染數(shù)據(jù)，所以找到關鍵數(shù)據(jù)，在每次路由發(fā)生變化的時候重置關鍵數(shù)據(jù)即可
例如：
for(var i =0; i<response.data.length; i++) {
if(response.data[i].id = this.orderId) {
this.order = response.data[i]
}
}
watch: {
'$route': function () {
this.orders = []
this.fetchData()
this.orderId = this.$route.params.orderId
}
}
這里我的關鍵數(shù)據(jù)就是 orderId
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
簡易Vue評論框架的實現(xiàn)(父組件的實現(xiàn))
本篇文章主要介紹了簡易 Vue 評論框架的實現(xiàn)(父組件的實現(xiàn))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本文主要介紹了el-menu動態(tài)加載路由的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
本文主要介紹了vue-json-editor json編輯器的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
vue-loader和webpack項目配置及npm錯誤問題的解決
這篇文章主要介紹了vue-loader和webpack項目配置及npm錯誤問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue中使用iconfont圖標的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關于vue單文件中引用路徑處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
淺談vuejs實現(xiàn)數(shù)據(jù)驅動視圖原理
這篇文章主要介紹了淺談vuejs實現(xiàn)數(shù)據(jù)驅動視圖原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
通過配置多頁面應用，從而將給子模塊依賴分隔開各自加載，可以減少初始資源的請求，加快頁面的訪問速度，這篇文章主要介紹了vue3+vite配置多頁面的詳細過程,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關于vue3獲取、設置元素高度的相關資料,小編通過實際案例向大家展示操作過程,操作方法簡單易懂,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue實戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07