项目中难点-A页面中填写查询条件并查询出表格数据后,点击详情跳转页面B,B页面返回A页面时保留查询出的内容信息--使用页面缓存keep-alive

发布时间 2023-11-07 10:21:45作者: Evident

页面缓存keep-alive

1、在路由routes中配置需要进行缓存的页面 keepAlive:true

meta:{
  keepAlive:true,
  title:"页面名称",
}

如图:

 

2、在router-view显示的入口页面APP.vue中,对需要的页面进行缓存

<template>
  <div id="app">
    <router-view v-if="!$route.meta.keepAlive" />
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
  </div>
</template>