Vuejs - 使用路由器推送前往上两层的路径

Question

我有一个按钮，单击该按钮即可执行路由器推送操作。

但是，我想导航到相对于当前级别向上两级的路径，但找不到任何有关如何实现它的示例。

示例：用户当前位于 page.com/app/users/id。
单击按钮后，用户需要导航到 page.com/app/hello。

我尝试使用以下代码 -

router.push('../../hello')

以及

router.push('/hello')

但它似乎仍然被路由到

page.com/app/users/id/hello

关于使用路由器推送导航到所需路径的最佳方式有什么想法吗？

Answer 1

我认为 Vue 路由器中没有任何功能可以像 Linux 中的目录遍历一样向上或向下移动:)我看到有两种方法可以实现你所需要的。

1. 使用正则表达式：

const route = useRoute()
const router = useRouter()
const currentRoute = route.path
const toRoute = currentRoute.replace(/[a-z]+\/[a-z]+$/, 'hello')
router.push(toRoute)

2. 动态路线：

// routes
const routes = [
  // dynamic segments start with a colon
  { path: '/app/:key', name: 'App'  },
]

// inside setup script
const router = use Router()
router.push({name: 'App', params: { key: 'hello' }}