Vue2迁移Vue3后路由切换时生命周期钩子执行顺序异常

Vue3 迁移后，<router-view> 的路由切换逻辑发生了变更——先挂载新路由组件，再卸载旧路由组件，这和 Vue2 中「先卸载旧组件，再挂载新组件」的顺序完全相反。官方做这个变更主要是为了支持更流畅的过渡动画（避免切换时页面空白），但直接导致了你遇到的问题：

• 从 Route1 切到 Route2 时，Route2 的 created 先执行，注册了 Store1；
• 随后 Route1 的 unmounted 执行，注销了 Store1；
• 最终 Route2 因为 Store1 被意外注销而报错。

方案1：用路由导航守卫替代生命周期钩子 #

把 Store 的注册/注销逻辑从组件生命周期钩子，转移到组件内的路由导航守卫中，利用导航守卫的执行顺序来保证逻辑正确：

• 旧组件（Route1）在 beforeRouteLeave 中注销 Store，这个钩子会在路由切换的最开始触发；
• 新组件（Route2）在 beforeRouteEnter 中注册 Store，这个钩子在旧组件的注销逻辑执行后才会触发。

修改后的代码示例：

Route1 代码 #

beforeRouteLeave(to, from, next) {
  this.unregisterStore('Store1');
  next();
}

beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.registerStore('Store1', Store1);
  });
}

Route2 代码 #

beforeRouteLeave(to, from, next) {
  this.unregisterStore('Store2');
  this.unregisterStore('Store1');
  next();
}

beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.registerStore('Store2', Store2);
    vm.registerStore('Store1', Store1);
  });
}

注意：beforeRouteEnter 中无法直接访问 this，需要通过 next(vm => { ... }) 来获取组件实例。

方案2：给Store增加引用计数逻辑 #

如果多个组件需要共用同一个 Store，最合理的方式是给 Store 的注册/注销逻辑加上引用计数：

• 注册 Store 时，计数+1；如果计数已经大于0，说明已有组件在使用，无需重复初始化；
• 注销 Store 时，计数-1；只有当计数减到0时，才真正执行注销操作。

示例逻辑（假设你的注册/注销方法在全局或Mixin中）：

const storeRefCount = {};

function registerStore(key, store) {
  if (storeRefCount[key]) {
    storeRefCount[key]++;
    return;
  }
  // 原本的注册逻辑
  // ...
  storeRefCount[key] = 1;
}

function unregisterStore(key) {
  if (!storeRefCount[key]) return;
  storeRefCount[key]--;
  if (storeRefCount[key] === 0) {
    // 原本的注销逻辑
    // ...
    delete storeRefCount[key];
  }
}

这种方式下，即使Route2先注册Store1（计数变为2），Route1注销时计数变为1，Store1不会被真正注销，Route2就能正常使用。

方案3：将公共Store改为全局注册 #

如果 Store1 是多个路由组件共用的公共 Store，完全可以直接在项目初始化时全局注册，不需要在每个组件内动态注册/注销。这样从根源上避免了生命周期顺序带来的问题。

比如在项目入口文件（main.js）中：

import { createApp } from 'vue';
import App from './App.vue';
import Store1 from './stores/Store1';

const app = createApp(App);
app.config.globalProperties.$Store1 = Store1; // 或者用Vuex/Pinia的全局注册方式
app.mount('#app');

内容的提问来源于stack exchange，提问作者UIDev