先來看一個專案中的需求
作為苦逼的前端開發者，我們無時無刻都要面對產品經理提的各種需求, 比如下圖這個場景
場景：
從詳情頁返回，希望列表頁快取，不重新渲染資料，這樣會提高使用者體驗。
所有列表頁和詳情頁是兩個webview，當我們進入詳情頁，列表頁webview，只是會在詳情頁webview下面，不會銷燬。
以下是小程式執行環境：我們可以看到每個頁面都有一個webview
但是但是，我們的專案是用vue開發的webapp,多個元件共用一個視窗，當我們切換路由時，切出路由元件會銷燬，所有列表頁進入詳情頁列表頁會銷燬，重新回到列表頁，列表頁元件會重新載入。
解決方案睡服提需求的人，改個簡單的需求emm... ,看了看鏡子中的自己，估計這輩子沒辦法從臉上得到任何的便利了,老老實實換個方案吧。
keep-alivekeep-alive是Vue提供的一個抽象元件，主要用於保留元件狀態或避免重新渲染。
<keep-alive> 包裹動態元件時，會快取不活動的元件例項，而不是銷燬他們。
和<transition> 相似， <keep-alive> 是一個抽象元件，它自身不會渲染一個DOM元素，也不會出現在父元件鏈中。
但是 keep-alive 會把其包裹的所有元件都快取起來。
em...怎麼辦呢，我們只是需要讓列表頁快取啊.
分析一下我們可以把需求拆分為2步
(1) 把需要快取和不需要快取的元件區分開，在元件的路由配置的元資訊，meta中定義哪些需要快取哪些不需要快取
具體程式碼如下
1，定義兩個出口 router-view
new Router({ routes: [ { path: '/', name: 'index', component: () => import('./views/keep-alive/index.vue') }, { path: '/list', name: 'list', component: () => import('./views/keep-alive/list.vue'), meta: { keepAlive: true //需要被快取 } }, { path: '/detail', name: 'detail', component: () => import('./views/keep-alive/detail.vue') } ]})(2)，開始按需快取元件
我們從官方文件提供的 api 入手,
keep-alive元件如果設定了 include ，就只有和 include 匹配的元件會被快取，
所以思路就是，動態修改 include 陣列來實現按需快取。
解決一下，我們在定義路由是，在元資訊中再加一個欄位，這裡是deepth欄位，代表進入路由的層級,比如首頁路由deepth是0.5,列表頁是1,詳情頁是2
new Router({ routes: [ { path: '/', name: 'index', component: () => import('./views/keep-alive/index.vue'), meta: { deepth: 0.5 // 定義路由的層級 } }, { path: '/list', name: 'list', component: () => import('./views/keep-alive/list.vue'), meta: { deepth: 1 keepAlive: true //需要被快取 } }, { path: '/detail', name: 'detail', component: () => import('./views/keep-alive/detail.vue'), meta: { deepth: 2 } } ]})然後在 app.vue中增加監聽器，監聽 我們進入路由的 方向
具體程式碼如下