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 // 须要被缓存
            }
        }
    ]
})
复制代码