点链接 → 命中哪条路由 → 守卫放不放行

iframe 里不便改真实地址栏,所以这个示例用 createMemoryHistory()(正式项目里是 createWebHistory())。 右边实时显示 useRoute() 的关键字段,日志里能看到每一次导航的判定过程。

[迷你控制台] 导航过程与 Vue / Router 的提示都会显示在这里

这一组演示专门讲「同一路由只换参数」

点 /users/1 再点 /users/2:组件实例被复用,mounted 不再执行、组件内的本地状态保留 —— 这就是「切了个分类,列表还是老数据」的成因。下面用两个按钮对比「不处理」和「watch 参数」两种写法。