## 一、概述 ?`router-view`?也是一個vue組件。它可以被視做是一個容器，它渲染的組件是你使用 vue-router 路由匹配到的組件；它是一個 functional 組件，渲染路徑匹配到的視圖組件。`<router-view>`渲染的組件還可以內嵌自己的`<router-view>`，根據嵌套路徑，渲染嵌套組件。 ## 二、屬性 目前僅name屬性，如果 <router-view>設置了名稱，則會渲染對應的路由配置中 components 下的相應組件。 * 類型:`string` * 默認值:`"default"` ## 三、keep-alive 有時候我們不希望組件被重新渲染影響使用體驗；或者處于性能考慮，避免多次重復渲染降低性能。而是希望組件可以緩存下來,維持當前的狀態。這時候就可以用到keep-alive組件。 如果未使用keep-alive組件，則在頁面回退時仍然會重新渲染頁面，觸發created鉤子，使用體驗不好。 1、keep-alive的生命周期 初次進入時：created > mounted > activated；退出后觸發 deactivated 再次進入：會觸發 activated；事件掛載的方法等，只執行一次的放在 mounted 中；組件每次進去執行的方法放在 activated 中； 2、用法 1）、更改App.vue ``` <div id="app" class='wrapper'> <keep-alive> <!-- 需要緩存的視圖組件 --> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要緩存的視圖組件 --> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> ``` 2）、在路由中設置keepAlive ``` .{ path: 'list', name: 'itemList', // 商品管理 component (resolve) { require(['@/pages/item/list'], resolve) }, meta: { keepAlive: true, title: '商品管理' } } ``` 3）、更改 beforeEach鉤子 這一步是為了清空無用的頁面緩存。為了解決這個問題，需要判斷頁面是在前進還是后退。 在beforeEach鉤子添加代碼： ``` let toDepth = to.path.split('/').length let fromDepth = from.path.split('/').length if (toDepth < fromDepth) { // console.log('back...') from.meta.keepAlive = false to.meta.keepAlive = true } ```