vue —— 内置组件keep-alive

写法

<keep-alive :include=“a, b">
    <component :is=“view></component>
</keep-alive>

<keep-alive :include=“/a|b/">
    <component :is=“view></component>
</keep-alive>

<keep-alive :include=“[‘a’, ‘b']">
    <component :is=“view></component>
</keep-alive>

具体使用

• 1.路由meta中记录使用keep-alive的路由

{
    path: '/home',
    component: () => import('../home.vue'),
    meta: {
        title: ',
        keepAlive: true
    }
}

• 2.创建router实例时加上scrollBehavior方法

export default new Router ({
    mode: 'history',
    base: process.env.BASE_URL,
    routers,
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }    
})

• 3.在需要缓存的router-view上包裹keep-alive组件

<keep-alive>
    <router-view v-if=“$route.meta.keepAlive"></router-view>
</keep-alive>

<router-view v-if=“!$route.meta.keepAlive"></router-view>

• 4.不同情况下可设置缓存和不缓存的路由，可以使用路由钩子做判断

beforeRouteLeave (to, from, next) {
    this.loading = true
    if (to.path === '/home') {
        from.meta.keepAlive = true    
    } else {
        from.meta.keepAlive = false
    }
    next()
}