詳解vue之頁面緩存問題(基于2.0)

更新時(shí)間：2017年01月10日 09:05:42 作者：莎莉哇

本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

比如有一個(gè)列表頁面，然后列表每項(xiàng)都有一個(gè)詳情，之前用vue1.x的時(shí)候，頁面緩存基本沒有什么問題。

在vue2.0中出現(xiàn)了列表頁面是每次都重新加載數(shù)據(jù)，但是詳情頁面卻只在第一次加載的時(shí)候調(diào)用數(shù)據(jù)，如果返回到列表再進(jìn)入詳情那么頁面是不會重新渲染頁面，可能是新手吧，這個(gè)問題困擾了我很久，一直沒有辦法解決……

根據(jù)vue-router的官方文檔所說，

watch: {
  // 如果路由有變化，會再次執(zhí)行該方法
  '$route': 'fetchData'
 }

按照這樣寫了，但是頁面還是沒有渲染

于是就想啊想，想啊想……

以為是路由沒有變，我就在頁面路由后面加何種參數(shù)包括時(shí)間戳

但是都沒有解決這個(gè)問題

……

后來經(jīng)過多次嘗試終于找到問題所在

watch 方法檢測路由變化確實(shí)生效了，但是頁面有些關(guān)鍵數(shù)據(jù)沒有清空還是緩存的上一次的數(shù)據(jù)，所以導(dǎo)致每次加載頁面都不會重新渲染數(shù)據(jù)，所以找到關(guān)鍵數(shù)據(jù)，在每次路由發(fā)生變化的時(shí)候重置關(guān)鍵數(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
   }
  }

這里我的關(guān)鍵數(shù)據(jù)就是 orderId

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問題
Vue是一個(gè)非常流行和強(qiáng)大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來分享一個(gè)Vue中非常經(jīng)典的問題,也是一個(gè)非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下
2023-08-08
詳解vuex 中的 state 在組件中如何監(jiān)聽
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
Vue3全局掛載使用Axios學(xué)習(xí)實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3全局掛載使用Axios學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
命令行CLI一鍵生成各種煩人的lint配置實(shí)例
這篇文章主要為大家介紹了命令行CLI一鍵生成各種煩人的lint配置實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI+vue-quill-editor富文本編輯器及插入圖片自定義，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解
這篇文章主要為大家介紹了vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解
這篇文章主要介紹了Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
uniapp-vue3-彈出選擇組件wo-pop-selector使用示例
wo-pop-selector彈出選擇組件采用uniapp-vue3實(shí)現(xiàn), 支持H5、微信小程序,本文給大家介紹uniapp-vue3-彈出選擇組件wo-pop-selector及使用示例,感興趣的朋友一起看看吧
2023-10-10
Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化，我們可以理解為從宏觀角度來看一眼就能看出來整個(gè)數(shù)據(jù)的占比，走向，對于數(shù)據(jù)可視化，很多互聯(lián)網(wǎng)公司是很看重這一塊的，包括大廠，本就將給大家介紹如何通過Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化
2023-06-06
在組件中修改vuex中state的具體實(shí)現(xiàn)方法
在組件中修改 Vuex 中的 state,根據(jù)使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但總體思路都是借助 Vuex 提供的 mutations 或 actions 來實(shí)現(xiàn),以下分別介紹兩種版本下的具體實(shí)現(xiàn)方法,需要的朋友可以參考下
2025-02-02