vue项目的列表页+详情页切换时怎么使用Vue Router和keep-果alive组件来实现缓存列表页查询条件和查询结果？ （vue3+ts版本）
相信大家在项目开发过程中会经常遇到类型列表页跳转到详情页再返回以后查询条件和查询结果会丢失的情况，而这种开发场景又会非常多，为了节省时间和方便复用，我在寻找一个适合的方案，下面仅供参考，如要使用自行根据实际情况调整：
- 首先，确保已经安装了Vue Router和keep-alive组件。你可以通过以下命令来安装它们：
npm install vue-router
npm install @vue/runtime-core@next
-
在项目的入口文件中，引入Vue Router和keep-alive组件，并创建一个Vue Router实例。在Vue Router实例中，定义列表页和详情页的路由配置。
// main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createHead } from '@vueuse/head'
import App from './App.vue'
import ListPage from './views/ListPage.vue'
import DetailPage from './views/DetailPage.vue'
const routes = [
// 列表页路由
{
path: '/list',
name: 'ListPage',
component: ListPage,
meta: {
keepAlive: true // 设置列表页需要缓存
}
},
// 详情页路由
{
path: '/detail/:id',
name: 'DetailPage',
component: DetailPage
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp(App)
app.use(router)
app.use(createHead())
app.mount('#app')
- 在列表页组件中，使用
<keep-alive>包裹整个列表页面，并在<router-view>上设置v-slot:default="{ Component }"，以便获取当前激活的组件。
<!-- ListPage.vue -->
<template>
<keep-alive>
<router-view v-slot="{ Component }">
<component :is="Component"></component>
</router-view>
</keep-alive>
</template>
- 在详情页组件中，使用
<router-link :to="{ name: 'ListPage' }">来返回列表页。当从详情页返回列表页时，列表页会自动从缓存中恢复，并保持之前的查询条件和查询结果。
<!-- DetailPage.vue -->
<template>
<div>
<!-- 详情页内容 -->
<button @click="goBack">返回列表页</button>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const goBack = () => {
router.push({ name: 'ListPage' })
}
</script>
现在，当你在列表页中进行查询操作，并跳转到详情页后再返回列表页，你会发现列表页的查询条件和查询结果已被缓存并保持不变。 请注意，以上示例是基于Vue 3和Vue Router 4的语法。如果你使用的是Vue 2和Vue Router 3，语法可能会有所不同，需要进行相应的调整。
------------------------------------后续更新----------------------------------------------------
上班一年半以后发现发现依旧遇到这个问题，就换了一种方式解决了一下，效果显著：
第一步:首先，在App.vue文件中做处理,主要是注册需要缓存的路由，比如后续需要声明的BdsjList:
<template>
<router-view #default="{ Component }">
<keep-alive :include="routeList">
<component :is="Component"></component>
</keep-alive>
</router-view>
</template>
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// 需要缓存的路由
const routeList = ["BdsjList", "EnterBeijingList", "ZdrGroupKongList", "ZdrGroupJieList"];
</script>
<style>
/* 注意：请勿在此处修改样式，如需样式定制，请写在`src/style/minapp-global-style.scss`文件中，并注意命名空间问题 */
#minApp {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
width: 100%;
height: calc(100vh - 96px) !important;
min-width: 1600px;
/* height: calc(100% - 96px) !important; */
}
</style>
第二步：给需要缓存的页面的vue单文件注册name为BdsjList
这两步做完以后，一般情况下，每次从编辑页面或者详情页面返回到列表页面时候都会取到之前缓存的列表页（如下直接返回处于第2页的列表页）
特殊情况：
当需要缓存的页面是某个路由页面的子路由页面，也就是说可能会有除了App.vue文件之外，这个路由的入口文件index.vue页面也会用到router-view去呈现页面，这种情况下需要将两个router-view的地方都要做修改不然不生效：
（1）需要缓存的列表页路由：
（2）该路由模块的入口文件：
