一、在app.vue的template里添加如下代码

<!-- // keep-alive 查询列表页面查看详情页面时，详情页面返回以后，查询列表页面的查询参数等数据全部缓存，重新查询时重新刷新获取数据。-->

<keep-alive>

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

</keep-alive>

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

二、在router/index.js里，需要设置缓存的路由页面添加如下代码：

没有缓存的代码是{ path: 'demo', component: () => import('../page/Demo/Demo')},

添加了缓存的代码是：

{

path: 'demo',

component: () => import('../page/Demo/Demo'),

meta: {

isUseCache: false, // 默认不缓存

keepAlive: true // 是否使用 keep-alive

}

},