成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[vuejs 踩坑實戰(zhàn)系列] keep-alive 被 beforeRouteEnter 騙了

MrZONT / 2620人閱讀

摘要：大家中秋假期快樂，假期分享一些實戰(zhàn)文章給大家，原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)現(xiàn)在大家基本都在單頁應(yīng)用里面使用了來緩存不活動的組件實例，而不是銷毀它們。

大家中秋假期快樂，假期分享一些實戰(zhàn)文章給大家，原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)

現(xiàn)在大家基本都在單頁應(yīng)用里面使用了 keep-alive 來緩存不活動的組件實例，而不是銷毀它們。

如果你還沒有使用，可以看看官方的介紹（如果大家需要一些新手入門的文章可以留言哈）：https://cn.vuejs.org/v2/api/#...

用法很簡單：主要是包裹


  ...

使用場景：

和單頁應(yīng)用環(huán)境配合使用的：

有以下幾個常識，如果你還沒有使用 keep-alive 的話，可以記下來：

1、組件內(nèi)的第一次的生命周期：

mounted ==> activated

2、切換路由再次進來只會觸發(fā) activated

3、可以通過 router 的鉤子函數(shù) beforeRouteEnter 來做一些輔助判斷

具體可以看看官方的這個的文檔：https://router.vuejs.org/zh/g...

不能獲取組件實例 this

比如你要設(shè)置 data 里面的變量，抱歉，這里操作不了，那如何做呢？

很多熟悉的人會想到 next 操作 vm 對象：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}

是的，這里你可以通過 from.name 來做一些判斷，比如如下代碼片段：

需求很簡單，判斷一下從特定路由切換過來，做一個判斷賦值給 data 的 isFromTester
beforeRouteEnter (to, from, next) {
  console.log(to, from);
  if (from.name == "Tester") {
    next(vm => {
      vm.isFromTester = true
    })
  } else {
    next(vm => {
      vm.isFromTester = false
    })
  }
}

然后你就可以在 activated 生命周期直接判斷啦

activated () {
  if (this.isFromTester) {
    //...
  }
}

大功告成啦

抱歉，這里的 activated 不會那么及時地更新 isFromTester，所以第一次你獲取的不是 true，第二次是可以的

那我們就要來刨根問底了，到底為啥不是及時更新的呢？

有沒有人想到了 vue 里面一個很常見的 nextTick 這個東西？

是滴，就是它，它騙了 activated，真相在這里：（我們省去了很多路由事件里面自己的處理邏輯和 vue activated 的 hook 的觸發(fā)）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108555.html

相關(guān)文章

  • 另辟蹊徑：vue單頁面，多路由，前進刷新，后退不刷新

    摘要：如何添加這個條件，判斷用戶是否刷新了頁面呢我們知道，當(dāng)使用后，只有第一次進入后會觸發(fā)鉤子函數(shù)，再次進入就不再執(zhí)行了。 目的：vue-cli構(gòu)建的vue單頁面應(yīng)用，某些特定的頁面，實現(xiàn)前進刷新，后退不刷新，類似app般的用戶體驗。注：　此處的刷新特指當(dāng)進入此頁面時，觸發(fā)ajax請求，向服務(wù)器獲取數(shù)據(jù)。不刷新特指當(dāng)進入此頁面時，不觸發(fā)ajax請求，而是使用之前緩存的數(shù)據(jù)，以便減少服務(wù)器請求...

    Ocean 評論0 收藏0

  • vue中keepAlive的使用

    摘要：文檔在及其更高版本中，和將會在樹內(nèi)的所有嵌套組件中觸發(fā)。另外，在我們的項目中遇到路由相同但參數(shù)不同的情況組件被復(fù)用，不更新的問題，官方給出了響應(yīng)路由參數(shù)變化根據(jù)參數(shù)數(shù)據(jù)響應(yīng) 前言 在開發(fā)中經(jīng)常有從列表跳到詳情頁，然后返回詳情頁的時候需要緩存列表頁的狀態(tài)（比如滾動位置信息），這個時候就需要保存狀態(tài)，要緩存狀態(tài)；vue里提供了keep-alive組件用來緩存狀態(tài)。可以用以下幾種方案解決問題...

    Anleb 評論0 收藏0

  • [vuejs 踩坑實戰(zhàn)系列] 路由場景下父子組件的生命周期順序來個刨根問底

    摘要：大家中秋假期快樂，假期分享一些原理設(shè)計文章給大家原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)凌晨寫的，不容易哈，收藏或者點個贊吧在常見的單頁應(yīng)用中，我們都會有一個根文件，里面放置一個然后配置路由來切換很多人在子父組件嵌套關(guān)系下的生命周期鉤子函數(shù)如何應(yīng)用， 大家中秋假期快樂，假期分享一些原理設(shè)計文章給大家 原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)(凌晨寫的，不容易哈，收藏或者點個贊吧) 在常見的單頁應(yīng)用中，我們都...

    FreeZinG 評論0 收藏0

  • Vue實戰(zhàn)—路由輕松設(shè)置vue-router（3）

    摘要：決定將組建渲染在哪，打開，添加配置路由打開文件夾下引入各個組件配置路由路徑組件路由重定向我們在數(shù)組設(shè)定為。官方文檔注意，當(dāng)前激活導(dǎo)航設(shè)置方法固定屬性值。所以使用保留組件狀態(tài)，避免重新渲染購物車的數(shù)據(jù)丟失。 上篇我們說了vue項目的目錄設(shè)計，本篇我們來學(xué)習(xí)一下vue路由。 路由的作用： 在web端路由（route）就是URL到函數(shù)的映射，vue的router就像一個容器，分配，處理每一個...

    timger 評論0 收藏0

  • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

    摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實驗室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<