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?
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
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
Related
I have a route setup where there's a parent with child routes, like this:
{
//name: 'ProductComments',
path: 'comments',
children: [
{
name: 'ProductComments',
path: '',
component: ProductComments
},
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
With the above configuration, Vue Router will render my ProductComments component if I visit /comments. However, if I comment the name out and uncomment it on the parent, it won't render the ProductComments component and will give me the warning:
The route named "ProductComments" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.
But why is this? The child is always a more "specific" route, so why does giving it a name magically cause it to render, whereas giving the name to the parent stops it?
I think this is one of those things that was decided by the Vue team and only they can really answer why. I was curious about it though and found this
github thread talking about the exact same thing. Doesn't seem like a satisfactory answer was ever found but the comment I specifically linked contains a workaround which is just adding a redirect:
{
path: '/user/:id',
name: 'user',
/* Explicitly tell the router to redirect to default children */
redirect: '/user/:id/',
component: User,
children: [
{
path: '',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
Set everything in the parent; it makes more semantic sense too.
My parent/child routes function like this. I haven't had any problems with this (so far?).
{
name: 'ProductComments',
path: 'comments',
component: ProductComments
children: [
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
This question already has an answer here:
Vue 3 router - router-link-active not working
(1 answer)
Closed 6 months ago.
I am currently in my Vue learning journey. I have come across a situation where I need to show my link as active for matching route too. For example: I have route /programs which shows Program link as active without any issues but I also want /programs/view to set Program link as active as well. How do I do it in Vue Router?
These are my route definitions in router.js file
const routes = [
{ path: '/', component: Main, name: 'main', redirect: '/dashboard', children:
[
{ path: '/dashboard', component: Dashboard, name: 'dashboard' },
{ path: '/programs', component: Programs, name: 'programs' },
{ path: '/programs/view', component: ViewProgram, name: 'view_program'},
...OTHER ROUTES
]
},
{ path: '/login', component: Login, name: 'login', meta: {noAuth: true} },
{ path: '/:pathMatch(.*)*', redirect: '/dashboard'}
];
I searched and found that router-link-active class should be automatically applied to Program link when the route starts with /programs, but it is not working in my case.
EDIT
I have found a workaround by manually matching route and appending active class to the router link. But I still expect an easier way to do this.
In my Program link:
<router-link to="/programs" :class="{'router-link-active': $route.fullPath.match(/\b\programs/) }">
<span>Programs</span>
</router-link>
I am using regex to match path pattern. So, every route that contains programs will get active class here.
dont u gotta do that in the component and not in the router?
take what i say with a grain of salt im
I want to open the same page but by using two different routes. The issue is when clicking on link 1 and after that click on link 2 my page is not being refreshed, when I print this.$route it shows old route info. How to solve this issue?
Link 1 - http://localhost:8080/test1route
Link 2 - http://localhost:8080/test2route
import TestComponent from '#/Component/TestComponent'
export default [{
path: '/test1route',
component: TestComponent,
children: [{
path: '/',
component: () => import('#/List')
},
{
path: '/test2route',
component: () => import('#/List')
}]
}]
Based on your route definition, the path to Link2 would actually be http://localhost:8080/test1route/test2route, since 'test2route' is a child of 'test1route'.
I'm looking for a solution to get the current situation:
Pages - domain.com/page-name (example: /contact)
Categories - domain.com/category-name (example: /blog)
With Vue I'm unable to create this with the slug as a prop.
{
path: '/:slug',
name: 'Page',
props: true,
component: () => import('../views/Page.vue')
},
{
path: '/:slug', // /category/:slug will work but I would like /:slug als path
name: 'Category',
props: true,
component: () => import('../views/Category.vue')
}
I know that a different path wil fix this, for example: '/category/:slug' but I'm looking for a way to create clean URLs without a prefix. Is this possible?
When switching between (sub) sub-routes, for a short while both sidebar components are rendered at once (ModalityMap.SidebarModalities and ModalityMap.SidebarVehicleInfo).
That seems so weird, it has never occurred to me before. Feels like it has to be something easy, maybe something i overlooked in the documentation. Or am I wrong and this is standard behavior?
It is a problem because the sidebars have different widths and even stacked on top of each other they do not overlap completely overflowing the one rendered above.
Excerpt from my routing
...
{
path: '/map',
component: ModalityMap.Base,
children: [
{
name: 'modality_map_view',
path: '',
components: {
main: ModalityMap.HomeView,
sidebar: ModalityMap.SidebarModalities
}
...
},
{
name: 'modality_map_view_vehicle',
path: 'vehicle/:vehicleId',
components: {
main: ModalityMap.HomeView,
sidebar: ModalityMap.SidebarVehicleInfo
}
...
}
...