缓存全部组件
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()
}
网站导航
网站导航
