一、場景描述
專案中常見的乙個場景是：
主頁->列表頁->詳情頁層層深入，詳情頁->列表頁->主頁層層返回。
為了提公升使用者體驗和效能，我們希望可以動態快取列表頁面：
從詳情頁->列表頁時，用快取中的列表頁，不用重新請求資料。
從列表頁->主頁時，登出掉列表頁，再進入列表頁時，獲取最新的資料。
現在，我們用keep-alive來實現這個功能。
二、keep-alive知識回顧
官方文件這樣介紹keep-alive
keep-alive
用法：包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和相似，是乙個抽象元件：它自身不會渲染乙個 dom 元素，也不會出現在元件的父元件鏈中。
當元件在內被切換，它的activated和deactivated這兩個生命週期鉤子函式將會被對應執行。
三、功能實現
01定義router
用keepalive表示路由對應的元件是否需要快取、deepth表示當前路由的層級。
**：
export default new router(,
component: index},,
component: list},,
component: detail
}]})
按需快取router-view
keep-alive元件的include屬性表示只有name匹配的元件會被快取。我們可以動態修改include屬性的值來實現按需快取。
如果要form(離開)的頁面是keepalive快取的，再根據deepth來判斷是前進還是後退。如果是後退，刪除掉includearr陣列裡from.name，也就是登出掉快取元件。
$route (to, from)
// 如果 要 form(離開) 的頁面是 keepalive快取的，再根據 deepth 來判斷是前進還是後退，如果是後退，需要登出快取的元件。
if (from.meta.keepalive && to.meta.deepth
}
完整**：
list
detail
這樣就實現了按需動態keep-alive。
四、效果
開啟vue-devtool裡注意觀察list元件的變化（灰色為快取狀態的元件）。
1.從首頁進入列表頁：list元件被快取，執行以下生命週期函式；
beforecreate
created
beforemount
mounted
activated
2.從列表頁進入詳情頁：list元件並沒有被登出，執行以下生命週期函式；
deactivated
3.從詳情頁再返回列表頁：沒有重新渲染list元件，用的是快取中的list元件，執行以下生命週期函式；
activated
4.從列表頁返回首頁：快取的list元件被登出，執行以下生命週期函式；
deactivated
beforedestroy
destroyed
5.再次從首頁進入列表頁：重新渲染list元件，list元件執行以下生命週期函式；
VUE實現頁面快取的解決方案 keep alive
三 注意事項 一 背景 在實際開發中，對於spa類的單頁面應用，乙個頁面就是乙個元件的概念，預設情況下，在我們開啟乙個新頁面的時候，為了記憶體的不浪費，不會快取上乙個頁面，但是一些時候我們的pm會給我們提一些需求，比如 1.列表頁面，我進行過濾之後跳轉，返回還能看到過濾的內容 2.列表頁面，我滾動道...
vue 路由 按需 keep alive
思路如下圖 寫2個router view出口 複製 在router裡定義好需要快取的檢視元件 new router 複製 我們從官方文件提供的api入手,keep alive元件如果設定了include，就只有和include匹配的元件會被快取，所以思路就是，動態修改include陣列來實現按需快取...
vant在Vue頁面內實現按需引入
參考 參考npm i vant sbabel plugin import 是一款 babel 外掛程式，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 安裝外掛程式 npm i babel plugin import d在.babelrc中配置plugins 外掛程式 plugin...