Vue Router - Routes with parameters

Question

I have the following router.js with few dozens of value-x, i.e. 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'
                    }
                }
            }
        ]
    }
)

I would like to turn it into something like this:

path: "/plant/*"

I tried the following:

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

Name variable should also be passed to route's name as well as to tab and menu variables.

What am I missing here?

What is name? It doesn't appear to be defined

Phil
– Phil

2018-10-29 07:53:43 +00:00
Commented Oct 29, 2018 at 7:53 — Phil
– Phil, Commented Oct 29, 2018 at 7:53
few dozens of value-x, example: value-one, value-two

Luke G
– Luke G

2018-10-29 07:59:07 +00:00
Commented Oct 29, 2018 at 7:59 — Luke G
– Luke G, Commented Oct 29, 2018 at 7:59

Shehzad · Accepted Answer · 2018-10-29 08:12:49Z

1

I suggest to use children routes like this:

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

    ]
}

now any route after the plant/ can be defined as children of routes and i have defined a route :name which will be used for plant/* If you don't want to use children routes and just concerned with passing route parameters, use the parameter without the braces :

path: "/plant/:name",

edited Oct 29, 2018 at 8:12

answered Oct 29, 2018 at 8:02

Shehzad

3475 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue Router - Routes with parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related