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

MrZONT 發(fā)布于2019-08-26 12:21 / 2684人閱讀

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

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

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

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

用法很簡(jiǎn)單：主要是包裹

...

使用場(chǎng)景：

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

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

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

mounted ==> activated

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

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

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

不能獲取組件實(shí)例 this

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

很多熟悉的人會(huì)想到 next 操作 vm 對(duì)象：

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

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

需求很簡(jiǎn)單，判斷一下從特定路由切換過來，做一個(gè)判斷賦值給 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 不會(huì)那么及時(shí)地更新 isFromTester，所以第一次你獲取的不是 true，第二次是可以的

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

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

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

GPU云服務(wù)器云服務(wù)器被vps騙了怎么辦騰訊云服務(wù)器被騙了 spark入門實(shí)戰(zhàn)系列 beforeRouteEnter

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108555.html

相關(guān)文章

另辟蹊徑：vue單頁(yè)面，多路由，前進(jìn)刷新，后退不刷新

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

Ocean 2019-08-21 17:43 評(píng)論0 收藏0
vue中keepAlive的使用

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

Anleb 2019-08-23 18:22 評(píng)論0 收藏0
[vuejs 踩坑實(shí)戰(zhàn)系列] 路由場(chǎng)景下父子組件的生命周期順序來個(gè)刨根問底

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

FreeZinG 2019-08-26 12:21 評(píng)論0 收藏0
Vue實(shí)戰(zhàn)—路由輕松設(shè)置vue-router（3）

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

timger 2019-08-23 18:08 評(píng)論0 收藏0
優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

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

JeOam 2019-08-23 18:24 評(píng)論0 收藏0