keep-alive 页面缓存详解

文章摘自 你蠢哭我咯 - CSDN

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 // 需要被缓存
            }
        }
    ]
})