keep-alive
keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節省性能，由於是一個抽象組件，所以在v頁面渲染完畢后不會被渲染成一個DOM元素
<keep-alive> <loading></loading> </keep-laive> 當組件在keep-alive內被切換時組件的activated、deactivated這兩個生命周期鈎子函數會被執行
被包裹在keep-alive中的組件的狀態將會被保留，例如我們將某個列表類組件內容滑動到第100條位置，那么我們在切換到一個組件后再次切換回到該組件，該組件的位置狀態依舊會保持在第100條列表處
關於這一點也是仁者見仁，有的產品可能會要求在每一次進入一個組件時頁面的初始位置都是保持在頂部的，這里可以利用Vue中的滾動行為，但是前提是你是HTML5 history模式
我們在創建一個router實例的時候，可以提供一個scrollBehavior方法，該方法會在用戶切換路由時觸發
const router=new VueRouter({ routes:[ { path:"/", component:Home } ], scrollBehavior(to,form,savedPosition){ //scrollBehavior方法接收to，form路由對象 //第三個參數savedPosition當且僅當在瀏覽器前進后退按鈕觸發時才可用 //該方法會返回滾動位置的對象信息，如果返回false，或者是一個空的對象，那么不會發生滾動 //我們可以在該方法中設置返回值來指定頁面的滾動位置，例如： return {x:0,y:0} //表示在用戶切換路由時讓是所有頁面都返回到頂部位置 //如果返回savedPosition,那么在點擊后退按鈕時就會表現的像原生瀏覽器一樣，返回的頁面會滾動過到之前按鈕點擊跳轉的位置，大概寫法如下： if(savedPosition){ return savedPosition }else{ return {x:0,y:0} } //如果想要模擬滾動到錨點的行為: if(to.hash){ return { selector:to.hash } } } }) 還有一個方法就是利用我們上面說過的，在keep-alive激活會觸發activated鈎子函數，那么在該函數內設置scrollTop為0
被keep-alive包裹的動態組件或router-view會緩存不活動的實例，再次被調用這些被緩存的實例會被再次復用，對於我們的某些不是需要實時更新的頁面來說大大減少了性能上的消耗，不需要再次發送HTTP請求，但是同樣也存在一個問題就是被keep-alive包裹的組件我們請求獲取的數據不會再重新渲染頁面，這也就出現了例如我們使用動態路由做匹配的話頁面只會保持第一次請求數據的渲染結果，所以需要我們在特定的情況下強制刷新某些組件
-
利用include、exclude屬性
<keep-alive include="bookLists,bookLists"> <router-view></router-view> </keep-alive> <keep-alive exclude="indexLists"> <router-view></router-view> </keep-alive>include屬性表示只有name屬性為bookLists，bookLists的組件會被緩存，（注意是組件的名字，不是路由的名字）其它組件不會被緩存exclude屬性表示除了name屬性為indexLists的組件不會被緩存，其它組件都會被緩存
-
利用meta屬性
export default[ { path:'/', name:'home', components:Home, meta:{ keepAlive:true //需要被緩存的組件 }, { path:'/book', name:'book', components:Book, meta:{ keepAlive:false //不需要被緩存的組件 } ]<keep-alive> <router-view v-if="this.$route.meat.keepAlive"></router-view> <!--這里是會被緩存的組件--> </keep-alive> <keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive> <!--這里是不會被緩存的組件--> -
官方提出的解決方案響應路由參數的變化
-
利用berforeRouteEnter實現前進刷新，后退緩存資料
-
利用第三方插件實現前進刷新，后退不緩存
作者：羊烊羴
鏈接：https://www.jianshu.com/p/4b55d312d297