vue - 删除最新的子路径答案

【问题标题】：vue - remove latest child pathvue - 删除最新的子路径
【发布时间】：2019-03-13 18:49:48
【问题描述】：

所以我目前的路由器路径设置如下：

{
    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()

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

你可以这样做：

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

【讨论】：

【解决方案2】：

在替换路由之前先获取列表的id。

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

另外，如果你命名你的子路线会更好。

【讨论】：

【解决方案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 }
})

【讨论】：

【解决方案4】：

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)

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

【讨论】：

所以如果我没有指定路线，就无法获得保证？
命名路线确实更容易
是的，我只是覆盖了我所有的基地。
@A.Lau 我为未命名的路线添加了一个有点 hacky 的解决方案
是的，我想如果我真的想在没有命名路线的情况下做一些字符串位置。

【解决方案5】：

将您的列表 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
        }
    ]
}

【讨论】：