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

将您的列表 ID 5bb17bdec7fb946609ce8bd4 存储在 localStorage 中，并在路由脚本 file.And 中获取该 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 2

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 3

您可以将子路由上移一级，这样它就不再是子路由了。这样 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 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 - 删除最新的子路径

vue - remove latest child path

javascript

vue.js

vue-router

vuejs2