最近在做項目重構，用到了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>
至此我們就可以使組件不被緩存