[vuejs 踩坑實戰系列] keep-alive 被 beforeRouteEnter 騙了

MrZONT 發布于2019-08-26 12:21 / 2613人閱讀

摘要：大家中秋假期快樂，假期分享一些實戰文章給大家，原創不易，歡迎轉發，一起學習現在大家基本都在單頁應用里面使用了來緩存不活動的組件實例，而不是銷毀它們。

大家中秋假期快樂，假期分享一些實戰文章給大家，原創不易，歡迎轉發，一起學習

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

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

用法很簡單：主要是包裹

...

使用場景：

和單頁應用環境配合使用的：

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

1、組件內的第一次的生命周期：

mounted ==> activated

2、切換路由再次進來只會觸發 activated

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

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

不能獲取組件實例 this

比如你要設置 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 的觸發）

云服務器 GPU云服務器被vps騙了怎么辦騰訊云服務器被騙了 spark入門實戰系列 beforeRouteEnter

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108555.html

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

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

Ocean 2019-08-21 17:43 評論0 收藏0
vue中keepAlive的使用

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

Anleb 2019-08-23 18:22 評論0 收藏0
[vuejs 踩坑實戰系列] 路由場景下父子組件的生命周期順序來個刨根問底

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

FreeZinG 2019-08-26 12:21 評論0 收藏0
Vue實戰—路由輕松設置vue-router（3）

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

timger 2019-08-23 18:08 評論0 收藏0
優秀文章收藏（慢慢消化）持續更新~

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

JeOam 2019-08-23 18:24 評論0 收藏0