根本原因是组件复用导致生命周期未触发，守卫无法访问组件实例；应改用activated钩子或watch监听路由参数变化来重置/拉取数据。
路由跳转后表单仍显示旧数据，不是“变慢”，而是根本没更新——本质是组件复用导致生命周期钩子未触发，数据没重置也没重新拉取。守卫本身不负责预拉取，但配合正确的组件响应机制，才能真正解决。
为什么守卫不能直接解决回显问题
router.beforeEach 等全局守卫只在跳转前执行，它无法访问组件实例，也不能清空 this.teacher 或调用 this.getInfo()。它适合做权限校验、加载状态控制，但不适合处理具体组件的数据逻辑。
常见误区：在守卫里 try-catch 调用接口，以为能“预拉取”。实际该请求与目标组件无绑定，组件渲染时仍可能用缓存数据或空对象，造成回显错乱或空白。
真正起效的组合方案
必须同时满足三个条件：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 路由独享守卫 + 组件内响应：在路由配置中定义 beforeEnter，接收 to、from、next 参数；在 next 回调中可调用 store.dispatch 或 API 方法，但最终需通过事件、vuex、provide/inject 或 this.$emit 通知组件
- 组件使用 activated 钩子（非 mounted）：当页面被 keep-alive 包裹时，mounted 只执行一次，而 activated 每次激活都会触发，适合根据 to.params.id 重新拉取或清空
- 区分添加/编辑场景的初始化逻辑：不要只靠 created 判断 id —— 它在复用时不会再次执行；改用 watch 监听 $route.params.id 变化，或在 activated 中统一处理
推荐写法（Vue 2 + Vue Router 3）
在 save.vue 中：
export default {
activated() {
// 每次进入都执行
const id = this.$route.params.id
if (id) {
this.getInfo(id)
} else {
this.teacher = { ...this.$options.data().teacher } // 重置为初始空对象
}
},
watch: {
'$route.params.id': {
handler(newId) {
if (newId) {
this.getInfo(newId)
} else {
this.teacher = { ...this.$options.data().teacher }
}
},
immediate: true
}
}
}
进阶建议：把逻辑抽离到 Composition API 或 Pinia
若项目已升级，用 setup + onActivated 更清晰：
- 用 useRoute 获取响应式路由参数
- 用 onActivated 执行拉取或重置
- 将 teacher 状态和 getInfo 封装为自定义 Hook，便于复用和测试
这样既避免 created 失效陷阱，又让数据流更可控，不再依赖“跳转快慢”来掩盖逻辑缺陷。
