主要針對(duì)頁面點(diǎn)擊返回時(shí)不重新加載頁面氧骤,直接獲取緩存集歇。
APP.vue 頁面
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 這里是會(huì)被緩存的視圖組件! -->
</router>
</keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 這里是不被緩存的視圖組件语淘! -->
</router>
當(dāng)路由的meta屬性的keepAlive屬性值為true時(shí)頁面的狀態(tài)保存,其他情況下不保存狀態(tài)际歼。
router index.js (路由頁面)
{
name: 'index',
path: '/index',
title: '主頁',
meta: {
pageTitle: '主頁',
keepAlive: true // 需要被緩存的頁面
}
}
從某頁返回需要緩存頁面時(shí)惶翻,keepAlive值設(shè)置為true,不需要?jiǎng)t為false鹅心。
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = true; // or false
next()
}
tips:
當(dāng)在子路由上時(shí)吕粗,<keep-alive>寫在APP.vue上不生效,需寫在對(duì)應(yīng)的父級(jí)頁面上旭愧。