在维护当前嵌套路由的同时导航到新的可选基本路由 - Vue Router答案

【问题标题】：Navigating to a new optional base route while maintaining the current nested routes - Vue Router在维护当前嵌套路由的同时导航到新的可选基本路由 - Vue Router
【发布时间】：2020-09-05 08:56:24
【问题描述】：

请有人帮助我解决参数/命名路线问题。

我正在尝试在第一级实现可选的命名路由更改，同时保持嵌套结构。有没有办法使用命名路由来实现这一点？

例如想象用例，或者： /欧洲/火车或 /汽车/欧洲/西班牙

我会有一条新的命名路线去训练而不是汽车，并且行为链接到完整路径： /火车/欧洲/西班牙

目前这会将您带到第一级 /train 删除嵌套路线的基本路线，然后您需要重新选择欧洲和西班牙。

这是我正在尝试实现的当前设置：

path: '/:transportSlug?',
name: 'Transport',
...
children: [
    {
        path: ':regionSlug',
        name: 'Region',
        ...
        children: [
            {
                path: ':countrySlug',
                name: 'Country',
                ...

<router-link :to="{
    name: 'Transport',
    params: {
        transportSlug: filter.slug,
        regionSlug: region.slug,
        countrySlug: country.slug
    }
}">

当导航到新的基本路线时，这将传递 3 个参数，并且所有 3 个参数都被正确传递。我可以在视图中输出它们，这让我认为这可能是某处的技术限制/误解。

我知道路径路由并通过正确计算创建完整路径。

Example here

谢谢。

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

在 Vue 的 Posva 的帮助下，我能够解决这个问题。

我认为您需要在要更新的嵌套树中引用命名路由，因此我对 Vue 路由器工作原理的方法和理解略有错误。

要更新 /euope/spain 中的 Transport 类型，我需要改为引用 Country 命名的 route 并更新 transport 的参数。

<router-link :to="{
    name: 'Country',
    params: {
        transportSlug: filter.slug,
    }
}">

这会在更新传输类型时保持正确的 URL。

希望这可能对某人有所帮助。

【讨论】：