vue頁面是否緩存的兩種方式

第一種

<keep-alive>

<router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

配合路由

//在router文件加上meta判斷 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ {//home會被緩存 path:"/home", component:home, meta:{keepAlive: true} } {//hello不會被緩存 path:"/hello", component:hello, meta:{keepAlive: false} } })
第二種

// 組件 export default { name: 'test-keep-alive', data () { return { includedComponents: "test-keep-alive" } } }

<keep-alive include="test-keep-alive"> <!-- 將緩存name為test-keep-alive的組件 --> <component></component> </keep-alive>

<keep-alive exclude="test-keep-alive"> <!-- 將不緩存name為test-keep-alive的組件 --> <component></component> </keep-alive>