这个问题我之前也碰到过，确实Vue Router默认的to/from在这种跨顶级分支跳转返回时，只会显示当前分支的路由信息——因为返回时是直接回到A的嵌套子路由，跳过了父级到B的那层记录。这里有几个实用的解决办法：

方法1：全局守卫维护自定义路由历史栈 #

你可以在Vue Router的beforeEach全局守卫里，手动维护一个路由历史数组，记录每次跳转的完整来源信息，这样任何组件都能回溯到之前的跳转轨迹。

示例代码：

// 在路由配置文件或main.js中
let routerHistory = [];

router.beforeEach((to, from, next) => {
  // 避免重复记录同一页面的刷新操作
  if (routerHistory[routerHistory.length - 1]?.fullPath !== from.fullPath) {
    routerHistory.push({
      fullPath: from.fullPath,
      name: from.name,
      matched: from.matched // 保存完整的路由匹配链
    });
  }
  // 限制历史栈长度，防止内存占用过高
  if (routerHistory.length > 20) {
    routerHistory.shift();
  }
  next();
});

之后在A的嵌套子组件里，就可以通过这个数组判断来源：

// 在A的嵌套子组件中
const lastRoute = routerHistory[routerHistory.length - 1];
if (lastRoute?.fullPath.startsWith('/b')) {
  // 说明上一次跳转是从Component B过来的
}

方法2：跳转时携带来源标识参数 #

从A的嵌套子组件跳转到B时，手动在路由的query参数里带上当前页面的完整路径，这样返回时就能通过参数识别来源。

跳转时的代码：

// 在A的嵌套子组件中触发跳转
this.$router.push({
  path: '/b',
  query: {
    from: this.$route.fullPath // 携带当前页面的完整路径
  }
});

在B组件中处理返回逻辑：

// 在B组件的返回按钮点击事件里
goBack() {
  const fromPath = this.$route.query.from;
  if (fromPath) {
    this.$router.push(fromPath);
    // 跳转后可以清除query参数，避免影响后续路由
    this.$router.replace({ query: {} });
  } else {
    this.$router.go(-1);
  }
}

回到A的嵌套子组件后，就能通过this.$route.query.from判断是否来自B组件了。

方法3：用状态管理工具存储路由历史 #

如果你的项目使用了Vuex或Pinia，把路由历史存在全局状态里是更优雅的方式，能在任意组件中方便地访问。

以Pinia为例，先创建路由状态仓库：

// stores/routerStore.js
import { defineStore } from 'pinia';

export const useRouterStore = defineStore('router', {
  state: () => ({
    history: []
  }),
  actions: {
    addRouteRecord(from) {
      if (this.history[this.history.length - 1]?.fullPath !== from.fullPath) {
        this.history.push({
          fullPath: from.fullPath,
          name: from.name
        });
      }
      if (this.history.length > 20) {
        this.history.shift();
      }
    },
    getLastRoute() {
      return this.history[this.history.length - 1];
    }
  }
});

然后在全局守卫里调用：

import { useRouterStore } from './stores/routerStore';

router.beforeEach((to, from, next) => {
  const routerStore = useRouterStore();
  routerStore.addRouteRecord(from);
  next();
});

最后在A的嵌套子组件中获取历史记录：

import { useRouterStore } from '@/stores/routerStore';

const routerStore = useRouterStore();
const lastRoute = routerStore.getLastRoute();
if (lastRoute?.fullPath.includes('/b')) {
  // 确认跳转来源是Component B
}

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