Vue 中如何实现路由切换时缓存组件状态？

宇文海霞提问于 2026-03-06 03:16:18 阅读 3

前端

我在用 Vue3 + Vue Router 做一个后台管理系统，列表页点进去详情页再返回，列表的滚动位置和搜索条件都重置了，体验很差。听说可以用 keep-alive 缓存路由组件，但试了好像没生效？

我的路由结构大概是这样：

<template>
  <router-view v-slot="{ Component }">
    <keep-alive include="["UserList"]">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

但 UserList 组件每次回来还是重新 created，name 也确认写了是 “UserList”，到底是哪里没配对？

我来解答赞 3 收藏

反馈

1 条解答

Prog.馨予 Lv1

keep-alive的include要用组件名不是路由名，确认下你的UserList组件里有没有写name选项。另外Vue3写法有点不一样，要这么写：



// 确保组件有name

export default {

  name: 'UserList',

  // ...其他代码

}

然后router-view外面包keep-alive，直接用：

路由配置里加个meta：



{

  path: '/user',

  component: UserList,

  meta: { keepAlive: true }

}

这样比用include稳，我之前也被这坑过，Vue3的keep-alive有点玄学。

2026-03-06 04:02