Vue Router：如何使用push跳转至两级上级路径？

你可以通过以下几种可靠方法实现需求：

1. 优先使用命名路由（推荐） #

给目标路由配置唯一名称，直接通过名称跳转，完全避免路径硬编码问题：

// 路由配置示例
const routes = [
  {
    path: '/app/hello',
    name: 'AppHello', // 给目标路由设置名称
    component: HelloComponent
  },
  // 其他路由配置...
]

// 按钮点击时执行跳转
router.push({ name: 'AppHello' })

这种方式不受当前路径变化影响，维护性最强。

2. 手动构造绝对路径 #

拆分当前路径，截取掉最后两段后拼接目标路径：

// 获取当前路径并拆分成段，过滤空字符串
const pathParts = router.currentRoute.path.split('/').filter(part => part)
// 保留前n-2段，再拼接目标路径
const targetPath = `/${pathParts.slice(0, -2).join('/')}/hello`
router.push(targetPath)

比如当前路径是/app/users/id，拆分后得到['app', 'users', 'id']，截取前1段（slice(0,-2)得到['app']），最终拼接成/app/hello。

3. 利用路由匹配记录（matched数组） #

通过currentRoute.matched获取当前匹配的路由层级，直接基于上级路由路径拼接：

// 假设/app是当前路由匹配的第一级（根据你的路由嵌套结构调整索引）
const parentRoute = router.currentRoute.matched[0]
router.push(`${parentRoute.path}/hello`)

如果你的路由嵌套结构是/app -> /app/users -> /app/users/id，matched[0]就是/app对应的路由记录，拼接后就是/app/hello。

为什么你的尝试无效？ #

• router.push('../../hello')：Vue Router的相对路径是基于当前路由配置的path而非URL路径。如果当前路由是/app/users/:id（嵌套在/app/users下），相对路径会被解析为相对于/app/users/:id，导致跳转错误。
• router.push('/hello')：这是根路径绝对跳转，会直接跳转到/hello而非/app/hello，不符合需求。

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