javascript - vue - 删除最新的子路径

Question

所以我目前的路由器路径是这样设置的:

{
    component: List,
    name: "account-list",
    path: "list/:id",
    // alias: "list/:id/edit_item/:item_id",
    children: [
        {
            path: "edit_item/:item_id",
        },
        {
            path: "*",
            redirect: "/account/list/:id"
        }
    ]
}

假设我们有这样一个 url:http://localhost:8080/#/account/list/5bb17bdec7fb946609ce8bd4/edit_item/5bbc2d12aded99b39c9eadb9

我如何将它变成:

http://localhost:8080/#/account/list/5bb17bdec7fb946609ce8bd4

我正在使用

this.$router.back()

这通常运行良好，但如果我通过直接粘贴其 url 来访问另一个项目，this.$router.back() 只会重新访问之前的 url。

那么有没有一种万无一失的方法来保证我会删除子路径？

Answer 1

Vue 路由器在导航时将保持当前参数，因此您应该能够导航到指定的父路由。

例如

this.$router.push({ name: 'account-list' })

当前的 :id 参数将被重新使用。

如果你想让它动态化，你可以按照当前路线的 matched 数组向上移动。例如，转到当前路由的命名父级

this.$router.push({
  name: this.$route.matched[this.$route.matched.length - 2].name 
})

这当然只适用于嵌套路由，因为顶级路由的 matched 长度仅为 1。

---

对于非命名路由，您必须构建完整路径，并将所有参数插入到字符串中。您可以通过获取目标路由 path 属性并将参数标记替换为 this.$route.params 中的标记来实现，但这会变得困惑。例如

// get parent path property
let path = this.$route.matched[this.$route.matched.length - 2].path
let realPath = path.replace(/:\w+/g, param => 
    this.$route.params[param.substr(1)])
this.$router.push(realPath)

如果您的路径使用高级模式匹配，这将不起作用。