欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解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)入詳情那么頁面是不會(huì)重新渲染頁面，可能是新手吧，這個(gè)問題困擾了我很久，一直沒有辦法解決……

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

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

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

.

.

.

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

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

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

……

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

watch 方法檢測(cè)路由變化確實(shí)生效了，但是頁面有些關(guān)鍵數(shù)據(jù)沒有清空還是緩存的上一次的數(shù)據(jù)，所以導(dǎo)致每次加載頁面都不會(huì)重新渲染數(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 簡易Vue評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))

    簡易Vue評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))

    本篇文章主要介紹了簡易 Vue 評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • el-menu動(dòng)態(tài)加載路由的實(shí)現(xiàn)

    el-menu動(dòng)態(tài)加載路由的實(shí)現(xiàn)

    本文主要介紹了el-menu動(dòng)態(tài)加載路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • vue-json-editor json編輯器的使用

    vue-json-editor json編輯器的使用

    本文主要介紹了vue-json-editor json編輯器的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決

    vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決

    這篇文章主要介紹了vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • vue中使用iconfont圖標(biāo)的過程

    vue中使用iconfont圖標(biāo)的過程

    這篇文章主要介紹了vue中使用iconfont圖標(biāo)的過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • 關(guān)于vue單文件中引用路徑的處理方法

    關(guān)于vue單文件中引用路徑的處理方法

    這篇文章主要給大家介紹了關(guān)于vue單文件中引用路徑處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01
  • 淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖原理

    淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖原理

    這篇文章主要介紹了淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-02-02
  • vue3+vite配置多頁面的示例代碼

    vue3+vite配置多頁面的示例代碼

    通過配置多頁面應(yīng)用，從而將給子模塊依賴分隔開各自加載，可以減少初始資源的請(qǐng)求，加快頁面的訪問速度，這篇文章主要介紹了vue3+vite配置多頁面的詳細(xì)過程,需要的朋友可以參考下
    2023-06-06
  • vue3獲取、設(shè)置元素高度的代碼舉例

    vue3獲取、設(shè)置元素高度的代碼舉例

    這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單易懂,需要的朋友可以參考下
    2024-08-08
  • Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App

    Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App

    這篇文章主要介紹了Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07

最新評(píng)論