詳解vue之頁面緩存問題(基于2.0)
更新時間：2017年01月10日 09:05:42 作者：莎莉哇
本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
比如有一個列表頁面，然后列表每項都有一個詳情，之前用vue1.x的時候，頁面緩存基本沒有什么問題。
在vue2.0中出現(xiàn)了列表頁面是每次都重新加載數據，但是詳情頁面卻只在第一次加載的時候調用數據，如果返回到列表再進入詳情那么頁面是不會重新渲染頁面，可能是新手吧，這個問題困擾了我很久，一直沒有辦法解決……
根據vue-router的官方文檔所說，
watch: {
// 如果路由有變化，會再次執(zhí)行該方法
'$route': 'fetchData'
}
按照這樣寫了，但是頁面還是沒有渲染
.
.
.
于是就想啊想，想啊想……
以為是路由沒有變，我就在頁面路由后面加何種參數包括時間戳
但是都沒有解決這個問題
……
后來經過多次嘗試終于找到問題所在
watch 方法檢測路由變化確實生效了，但是頁面有些關鍵數據沒有清空還是緩存的上一次的數據，所以導致每次加載頁面都不會重新渲染數據，所以找到關鍵數據，在每次路由發(fā)生變化的時候重置關鍵數據即可
例如：
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
}
}
這里我的關鍵數據就是 orderId
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue是一個非常流行和強大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構建用戶界面,但是,Vue也有一些需要注意和掌握的細節(jié)和技巧,今天我們來分享一個Vue中非常經典的問題,也是一個非常實用的技巧,Vue利用computed解決單項數據流,需要的朋友可以參考下2023-08-08
詳解vuex 中的 state 在組件中如何監(jiān)聽
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家介紹了Vue3全局掛載使用Axios學習實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了命令行CLI一鍵生成各種煩人的lint配置實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家介紹了vue3.2自定義彈窗組件結合函數式調用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue自定義組件雙向綁定實現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
uniapp-vue3-彈出選擇組件wo-pop-selector使用示例
wo-pop-selector彈出選擇組件采用uniapp-vue3實現(xiàn), 支持H5、微信小程序,本文給大家介紹uniapp-vue3-彈出選擇組件wo-pop-selector及使用示例,感興趣的朋友一起看看吧2023-10-10
Vue+ECharts+高德地圖API實現(xiàn)天氣預報數據可視化的教程
所謂數據可視化，我們可以理解為從宏觀角度來看一眼就能看出來整個數據的占比，走向，對于數據可視化，很多互聯(lián)網公司是很看重這一塊的，包括大廠，本就將給大家介紹如何通過Vue+ECharts+高德地圖API實現(xiàn)天氣預報數據可視化2023-06-06
在組件中修改 Vuex 中的 state,根據使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但總體思路都是借助 Vuex 提供的 mutations 或 actions 來實現(xiàn),以下分別介紹兩種版本下的具體實現(xiàn)方法,需要的朋友可以參考下2025-02-02