在app.vue中改寫router-view
<keep-alive>
? ? <router-view v-if="$route.meta.keepAlive">
? ? ? ? <!-- 這里是會(huì)被緩存的視圖組件榕莺，比如 page1,page2 -->
? ? </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
? ? <!-- 這里是不被緩存的視圖組件空另，比如 page3 -->
</router-view>
在router/index.js中添加路由元信息旭斥，設(shè)置需要緩存的頁(yè)面
routes: [{
? ? ? ? path: '/',
? ? ? ? name: 'index',
? ? ? ? component: index,
? ? ? ? meta: {
? ? ? ? ? ? keepAlive: false, //此組件不需要被緩存
? ? ? ? }
? ? },
? ? {
? ? ? ? path: '/page1',
? ? ? ? name: 'page1',
? ? ? ? component: page1,
? ? ? ? meta: {
? ? ? ? ? ? keepAlive: true, //此組件需要被緩存
? ? ? ? }
? ? },
? ? {
? ? ? ? path: '/page2',
? ? ? ? name: 'page2',
? ? ? ? component: page2,
? ? ? ? meta: {
? ? ? ? ? ? keepAlive: true, // 此組件需要被緩存
? ? ? ? }
? ? },
? ? {
? ? ? ? path: '/page3',
? ? ? ? name: 'page3',
? ? ? ? component: page3,
? ? ? ? meta: {
? ? ? ? ? ? keepAlive: false, // 此組件不需要被緩存
? ? ? ? }
? ? }
]
