组件被缓存后onmounted不再触发，需用onactivated钩子或watch路由参数刷新数据，也可通过router-view的key强制重建，或配置nocache跳过缓存。
组件被 <keep-alive></keep-alive> 缓存后，onMounted 不会再次触发，导致路由切换回来时仍显示旧数据。核心思路是：不依赖销毁重建，而是主动在组件“激活”或“路由变化”时刷新数据。
用 onActivated 钩子重新拉取数据
缓存组件每次从隐藏状态恢复显示时，会触发 onActivated。这是最直接、最常用的响应方式。
- 把数据请求逻辑抽成独立函数（如
loadData()） - 同时在
onMounted和onActivated中调用它 - 确保首次进入和切回都拿到最新数据
示例：
<script setup><br>import { ref, onMounted, onActivated } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br>const list = ref([])<br><br>const loadData = async () => {<br> const res = await api.getList()<br> list.value = res.data<br>}<br><br>onMounted(loadData)<br>onActivated(loadData)<br></script>监听路由参数变化并更新
当组件复用（如 /user/1 → /user/2）但没销毁时，$route.params.id 会变，但组件不会自动响应。需要用 watch 监听变化。
- 使用
useRoute()获取当前路由对象 - 用
watch(() => route.params.xxx, ...)响应参数变更 - 配合
{ immediate: true }确保首次加载也执行
适合详情页、分类页等强依赖参数的场景。
给 router-view 加 key 强制重建
如果不需要保留状态（比如表单要清空、滚动位置重置），最彻底的方式是让 Vue 认为这是个新组件。
- 在
<router-view></router-view>上绑定:key="$route.fullPath" -
$route.fullPath包含路径、查询参数、哈希，只要任一变化，key 就不同 - 组件会完整走一遍生命周期：
onUnmounted→onMounted
注意：有性能开销，慎用于高频切换或复杂组件。
按需配置 noCache 控制缓存开关
不是所有页面都需要缓存。在路由 meta 中设置 noCache: true 可跳过 <keep-alive></keep-alive>。
- 路由配置中加
meta: { noCache: true } - 模板中配合
<keep-alive :exclude="['Detail']"></keep-alive>或动态判断 - 确保组件
name与路由name完全一致，否则缓存逻辑失效
适用于统计页、编辑页等必须实时刷新的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
