vue keep-alive的简单使用

缓存组件(全部缓存)

来到的你app.vue

<keep-alive>
    <router-view>
        
    router-view>
keep-alive>

如果你想选择性缓存

在app.vue写成这样(vue2.0只能有一个根节点)



<div>
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive">router-view>
    keep-alive>
    <router-view v-if="!$route.meta.keepAlive">router-view>
div>
然后来到你的路由

router.js


{
    path: '/',
    name: 'home',
    component: Home,
    meta: {
        keepAlive: true // 需要被缓存
    }
}, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
        keepAlive: false // 不需要被缓存
    }
}

大概就这样还有很多方法

       我推荐这个博客:http://www.jianshu.com/p/0b0222954483  写得不错基本的业务要求都写了

你可能感兴趣的:(技术(javascript))