Router-路由缓存问题

在使用带参数的路由（如 /users/:id）时，需要特别注意一个行为：Vue 会复用组件实例，而不会重新创建它。

这意味着如果你从 /users/wreckloud 导航到 /users/rainmist，渲染的是同一个组件实例，仅路由参数变了，但组件的生命周期钩子（如 created、mounted）不会重新触发。

问题表现：组件数据不更新

比如在电商项目中，点击一级分类切换时，虽然 URL 路径变了，但由于渲染的是同一个组件，它不会销毁重建，你写在 mounted 或 created 中的分类数据请求不会再次触发。结果就是：分类变了，商品却没更新。

解决思路

目标：让组件在路由参数变化时也能触发数据更新。
我们有两种方式来应对这个问题：

推荐方案：组件内监听路由变化

Vue Router 提供了 onBeforeRouteUpdate 钩子，可以在参数变化时响应路由更新，用于手动触发数据刷新。

它更符合 Vue 的设计理念：
组件复用是默认行为，我们应当尊重这一点，在复用时用钩子来控制数据逻辑，比起强制销毁组件，更优雅也更可控。

import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate((to, from, next) => {
  // to 是“将要进入”的路由对象
  // from 是“当前离开的”路由对象
  // next 是导航控制函数，必须调用

  // 在这里执行你想做的逻辑，比如重新请求数据
  next()
})

• to：即将进入的路由对象
• from：当前离开的路由对象
• next：必须调用，继续路由流程（异步逻辑时不能忘）

这个钩子适合在组件复用时更新数据，比起重建组件更加轻量、灵活。

适合场景：希望复用组件，但又要响应参数变化（比如分页、分类切换）

方案二：用 key 控制组件强制销毁

给 <router-view> 加上 :key="$route.fullPath"，这样每次路径变化都会强制重新挂载组件，从而触发生命周期钩子。

<RouterView :key="$route.fullPath" />

这种方法简单粗暴，组件生命周期重新走一遍
但这种无差别重建，性能可能受影响；对一些有缓存需求的组件不友好

适合场景：组件初始化逻辑很重、数据变动频繁不怕重建

定制路由行为

好的，以下是根据你之前的风格整理和完善后的笔记正文：

---

定制路由行为

在不同路由切换时，页面默认会停留在上一次的位置，这在某些场景下并不友好。比如从一个页面跳转到另一个页面时，用户通常期望页面自动滚动到顶部，而不是保持在原来的滚动位置。

如何实现？

Vue Router 提供了 scrollBehavior 配置项，可以在路由切换时自定义页面的滚动行为。

配置方式：

在创建路由实例时，传入 scrollBehavior 选项。例如：

const router = createRouter({
  // ...其他配置
  scrollBehavior() {
    return { top: 0 }
  }
})

常见场景：

• 希望每次路由切换都回到顶部：return { top: 0 }

通过配置 scrollBehavior，可以灵活控制路由切换时页面的滚动行为，提升用户体验。