Vue Router - 带参数的路由答案

【问题标题】：Vue Router - Routes with parametersVue Router - 带参数的路由
【发布时间】：2018-10-29 07:50:56
【问题描述】：

我有以下 router.js 有几十个 value-x，即 value-one，value-2。

    const router = new Router({
        routes: [
            {
                path: "/plant/value-one",
                name: "value-one",
                components: {
                    default: Site
                },
                props: {
                    default: {
                        tab: 'value-one',
                        menu: 'value-one'
                    }
                }
            },
            {
                path: "/plant/value-two",
                name: "value-two",
                components: {
                    default: Site
                },
                props: {
                    default: {
                        tab: 'value-two',
                        menu: 'value-two'
                    }
                }
            }
        ]
    }
)

我想把它变成这样的：

path: "/plant/*"

我尝试了以下方法：

    const router = new Router({
        routes: [
            {
                path: "/plant/{:name}",
                name: name,
                components: {
                    default: Site
                },
                props: {
                    default: {
                        tab: name,
                        menu: name
                    }
                }
            }
        ]
    }
)

Name 变量也应该传递给路由的名称以及 tab 和 menu 变量。

我在这里错过了什么？

【问题讨论】：

什么是name？它似乎没有定义
几十个value-x，例如：value-one，value-two

标签： vue.js vue-router

【解决方案1】：

我建议使用这样的子路由：

{
    path: '/plant',
    component: plantComponent,
    children: [
        {
            path: ':name',
            component: someComponent,
            name: 'someName'
        },

    ]
}

现在植物/之后的任何路线都可以定义为路线的子路线，我已经定义了一条路线:name，它将用于植物/* 如果您不想使用子路由而只关心传递路由参数，请使用不带大括号的参数：

path: "/plant/:name",

【讨论】：