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"
        }
    ]
}

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

我如何将其转换为：

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

我当前正在使用

this.$router.back()

通常情况下效果很好，但是如果我要直接粘贴其网址来访问另一个项目，this.$router.back()只会重新访问以前的网址。

那么有没有一种安全的方法来保证我将删除子路径？

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)

如果您的路径使用高级模式匹配，此方法将无效。

Answer 2

您可以将孩子的路线上移一个级别，这样它就不再是孩子了。这样，id将显示在this.$router.params对象中。

[
  {
    path: 'list/:id',
    component: List,
    name: "account-list"
  },
  {
    path: 'list/:id/edit_item/:itemid',
    component: Form,
    name: "account-form"
  }
]

您可以执行$router.replace来替换当前路径。

const id = this.$router.params['id'];

this.$router.replace({
  name: 'account-form',
  params: { id }
})

Answer 3

将列表ID 5bb17bdec7fb946609ce8bd4存储在 localStorage 中，并在路由脚本文件中获取该localStorage，并将其添加为重定向路径。例如：

var listId = localStorage.getItem('listId');
// routh obj
{
    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/" + listId
        }
    ]
}

Answer 4

在替换路线之前先获取列表的ID。

let currentId = this.$route.params.id
this.$router.replace({
  name: 'list',
  params: { id: currentId }
})

此外，如果您命名子路线，那就更好了。

Answer 5

您可以这样做：

window.history.slice(0,window.history.length);
this.$router.push(this.$route.path.split('/edit_item/')[0]);

Vue-删除最新的子路径

5 个答案: