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

Вы можете сделать это так:

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

Answer 2

сначала получите идентификатор списка перед заменой маршрута.

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

также было бы лучше, если вы назовете свои под маршруты.

Answer 3

Маршрутизатор Vue будет поддерживать текущие параметры при навигации, поэтому вы сможете перейти к названному родительскому маршруту.

Например,

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

Текущий параметр :id будет восстановлен-used.

Если вы хотите сделать его динамичным, вы можете пробраться вверх по массиву matched текущего маршрута.Например, чтобы перейти к родительскому текущему маршруту с именем parent

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

Это, конечно, будет работать только на вложенных маршрутах, поскольку длина matched для маршрутов верхнего уровня составляет всего 1.

---

Для неименованных маршрутов вы должны составить полный путь со всеми параметрами, интерполированными в строку.Вы можете сделать это, получив свойство 1011 * маршрутов назначения и заменив токены параметров на те, что указаны в 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 4

Вы можете переместить свой дочерний маршрут на один уровень вверх, чтобы он больше не был ребенком.Таким образом, id будет отображаться в объекте this.$router.params.

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

Вы можете сделать do $router.replace, чтобы заменить текущий путь.

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

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

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