keep-alive实现数据缓存

缓存全部组件

App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive> 
  </div>
</template>

缓存部分组件

App.vue

<template>
  <div id="app">
    <!--通过router里面的属性进行判断-->
    <keep-alive>
      <!--想要缓存的页面-->
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!--不想要缓存的页面-->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

router-index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: [{
    path: '/content',
    name: 'content',
    component: content,
    // 要缓存的组件
    meta: { keepAlive: true }
  },
  {
    path: '/issues',
    name: 'issues',
    component: issues,
    // 不要缓存的组件(下面这句也可以不写)
    meta: { keepAlive: false}
  }]
})
export default router

content.vue

// 在activated生命周期中重新获取数据
activated () {
    // 既缓存本页面的数据，当从别的页面传参进入后，又会重新渲染数据
    this.getData()
}

网站导航

网站导航