vue 路由 按需 keep alive

思路如下圖:

寫2個router-view出口

複製**

new router(

},},}]
})複製**

我們從官方文件提供的api入手,

keep-alive元件如果設定了include，就只有和include匹配的元件會被快取，

所以思路就是，動態修改include陣列來實現按需快取。

複製**

export default ),

watch: 
//如果 要 form(離開) 的頁面是 keepalive快取的，
//再根據 deepth 來判斷是前進還是後退
//如果是後退
if (from.meta.keepalive && to.meta.deepth < from.meta.deepth) 
}}};
複製**

keep-alive需要其包裹的元件有name屬性，

我們上面的**中的push和splice的是router的name。

所以建議大家把route的name屬性設定和route對應component的name設成一樣的。

讓我們驗證一下我們的成果

在 vue-devtool 裡，灰色的元件，代表是快取狀態的元件，注意觀察list的變化。

實現按需keep-alive，網上有方法，通過修改route配置裡的meta裡的keepalive值來實現。

直接修改meta的值，可能會出現上圖的情況，keep-alive裡有一直有乙個快取的 list,正常的rotuer-view裡也有乙個,

vue 路由的按需載入

之前有提到過當建立乙個vue結尾的檔案的時候，則需要在router資料夾下的index頁面進行新增對應的路徑，這個是沒有錯的，但是當你進行按需載入的時候，就不在需要使用import來新增對應的路徑了 此處的路徑可以省略 放入頁面中的 const router new vuerouter中寫入，寫入的...

vue路由按需載入（路由懶載入

目前有三種方式實現路由元件的懶載入，分別是 把路由配置，進行修改 path shopcar name shopcar component resolve require pages shopcar resolve 1 執行是開啟chrome的network，就會看到進入路由 shopcar 時，會多...

vue路由懶載入,元件按需載入

懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。在單頁應用中，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用...