根本原因是组件复用导致生命周期未触发，守卫无法访问组件实例；应改用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 失效陷阱，又让数据流更可控，不再依赖“跳转快慢”来掩盖逻辑缺陷。