CODEWITHSUNDEEP
vue.jsroutesvuejs3
Anton Platonov
Anton Platonov

Reputation: 389

How can I add a route on top of the dynamic route Vue.js

I have a few dynamic routes like this:

path: '/group/:id',
name: 'Group',

I need to edit the group contents in a separate view, which is not a modal, and pass some data to it. The link should be something like this

... group/3/edit

Child routes seem different. Which concept should I explore to do it?

PS: I found the solution that seems too simple.

I just created a separate route:

{
    name: 'EditGroup',
    path: '/group/:id/edit',
    component: EditGroup,
    props: true
},

And pass the id as a prop from task component. Would it be a sound approach?

Upvotes: 0

Views: 146

Answers (2)

dev-coffee
dev-coffee

Reputation: 1

I think this will work for you. Assuming that you use nested children route.

nested routes https://router.vuejs.org/guide/essentials/nested-routes.html

path: 'group/', children: [ { path: '/group/:id/edit', name: 'child-group', props: true, }, ]

you may also use props and pass it to router link as params.

set props to true https://router.vuejs.org/guide/essentials/passing-props.html

Upvotes: 0

emmansarsale
emmansarsale

Reputation: 11

this should do

path: 'group/', 
children: [
 {
   path: '',
   name: 'groupView',
},
 {
   path: ':id?/',
   name: 'groupIdView',
},
 {
   path: ':id?/edit',
   name: 'groupIdEdit',
}
]

where your first child will be you group view second will be the id view and lastly the edit view

Upvotes: 1

Related Questions