最近在做專案重構，用到了keep-aliveVue內建元件（<keep-alive> 是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在元件的父元件鏈中。）

看了官網使用方法挺簡單，可以設定快取元件或者不快取，只需要使用

include - 字串或正則表示式。只有名稱匹配的元件會被快取。

exclude - 字串或正則表示式。任何名稱匹配的元件都不會被快取。

max - 數字。最多可以快取多少元件例項。

我這裡需要不快取元件使用了exclude，並且在不被快取的元件中添加了name屬性

<keep-alive exclude="test">
<router-view>
</router-view>
</keep-alive>
由於快取的元件是複用元件需要根據id去動態載入不同資料，但是發現並沒起作用，元件還是被快取了，找了好久發現專案中有多個<router-view></router-view>路由出口時exclude或者include會不起作用，但是我們在路由中增加 router.meta 屬性是可以解決這個問題的

export default new Router([
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被快取
}
}, {
path: '/:id',
name: 'test',
component: Test,
meta: {
keepAlive: false // 不需要被快取
}
}
])
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 這裡是會被快取的檢視元件，比如 Home！ -->
</router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
<!-- 這裡是不被快取的檢視元件，比如 Text -->
</router-view>
至此我們就可以使元件不被快取