keep-alive 頁面緩存

vue2.0提供了一個keep-alive組件用來緩存組件,避免屢次加載相應的組件, 減小性能消耗

緩存整個頁面或組件

<keep-alive>
    <component>
        <!-- 組件將被緩存 -->
    </component>
</keep-alive>
複製代碼

有時候 可能須要緩存整個站點的全部頁面,而頁面通常一進去都要觸發請求的 在使用keep-alive的狀況下

<keep-alive>
    <router-view></router-view>
</keep-alive>
複製代碼

將首次觸發請求寫在created鉤子函數中,就能實現緩存, 好比列表頁, 去了詳情頁 回來仍是在原來的頁面

緩存部分頁面或者組件

方法: 使用router.meta屬性

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
複製代碼

router設置

//...router.js
export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello,
            meta: {
                keepAlive: false // 不須要緩存
            }
        },
        {
            path: '/page1',
            name: 'Page1',
            component: Page1,
            meta: {
                keepAlive: true // 須要被緩存
            }
        }
    ]
})
複製代碼