Vue路由优化：如何路由到父路由的最后活跃子组件？

这个需求确实看起来简单但细节容易绕，你的现有方案能跑但逻辑分散确实有点麻烦，我这边有几个更简洁的思路可以试试：

方案一：用全局路由守卫集中管理逻辑 #

把原来分散在组件里的导航守卫逻辑移到全局路由守卫中，所有逻辑都收拢到一处，维护起来更清晰。

步骤1：更新路由配置，标记默认子路由 #

先给每个父路由的默认子路由加个meta标识，方便后续自动识别：

const routes = [
  {
    path: '/foo',
    name: 'Foo',
    component: Foo,
    children: [
      { path: '', name: 'foo1', component: Foo1, meta: { isDefault: true } },
      { path: 'foo2', name: 'foo2', component: Foo2 }
    ]
  },
  {
    path: '/bar',
    name: 'Bar',
    component: Bar,
    children: [
      { path: '', name: 'bar1', component: Bar1, meta: { isDefault: true } },
      { path: 'fubar1', name: 'fubar1', component: Fubar1 },
      { path: 'fubar2', name: 'fubar2', component: Fubar2 },
      { path: 'bar2', name: 'bar2', component: Bar2 }
    ]
  }
];

步骤2：全局路由守卫实现逻辑 #

在路由初始化时添加全局守卫，统一处理跳转和记录逻辑：

router.beforeEach((to, from, next) => {
  // 定义需要跟踪最后活跃子路由的父路由列表
  const targetParentRoutes = ['Foo', 'Bar'];

  // 场景1：用户直接访问父路由（比如点击导航栏的Foo）
  if (targetParentRoutes.includes(to.name)) {
    const lastActivePath = store.state.lastActivePaths[to.name];
    if (lastActivePath) {
      // 跳转到该父路由下最后活跃的子路由
      next(lastActivePath);
      return;
    }
    // 没有历史记录时，自动跳转到默认子路由
    const defaultChild = to.matched[0].children.find(child => child.meta.isDefault);
    next(defaultChild ? defaultChild.path : undefined);
    return;
  }

  // 场景2：用户离开子路由，记录当前路径到Vuex
  const parentRoute = from.matched.find(route => targetParentRoutes.includes(route.name));
  if (parentRoute) {
    store.commit('SET_LAST_ACTIVE_PATH', {
      routeName: parentRoute.name,
      path: from.fullPath // 用fullPath可以保留路由参数
    });
  }

  next();
});

这样一来，所有父路由的逻辑都在全局守卫里统一处理，不用每个组件都写重复的导航守卫代码。

方案二：用混入（Mixin）封装复用逻辑 #

如果不想用全局守卫，也可以把组件导航守卫的逻辑封装成一个混入，让需要的父组件直接引入即可：

步骤1：封装混入文件 #

// src/mixins/lastActiveRoute.js
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const lastActive = vm.$store.state.lastActivePaths[vm.$options.name];
      if (lastActive) {
        next(lastActive);
      } else {
        // 自动跳转默认子路由
        const defaultChild = to.matched[0].children.find(child => child.meta.isDefault);
        next(defaultChild ? defaultChild.path : undefined);
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$store.commit('SET_LAST_ACTIVE_PATH', {
      routeName: this.$options.name,
      path: from.fullPath
    });
    next();
  }
};

步骤2：父组件引入混入 #

<!-- Foo.vue -->
<script>
import lastActiveRouteMixin from '@/mixins/lastActiveRoute';

export default {
  name: 'Foo',
  mixins: [lastActiveRouteMixin],
  // 组件其他逻辑
};
</script>

<!-- Bar.vue -->
<script>
import lastActiveRouteMixin from '@/mixins/lastActiveRoute';

export default {
  name: 'Bar',
  mixins: [lastActiveRouteMixin],
  // 组件其他逻辑
};
</script>

这种方式保持了组件级的逻辑关联，但又避免了重复代码，适合需要更灵活控制的场景。

补充优化：Vuex部分可以简化 #

如果你的Vuex版本支持，也可以把mutation写得更简洁：

mutations: {
  SET_LAST_ACTIVE_PATH(state, { routeName, path }) {
    state.lastActivePaths = { ...state.lastActivePaths, [routeName]: path };
  },
},

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