Menu
I know we can go to a route by its name using $router.push({ name: 'route-name' }).
What I want to know is how to do that with a child route name.
This is my route structure:
export default [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue'),
childs: [
{
name: 'home.about',
path: '/about',
component: import('@/views/Home/About.vue')
}
]
}
]
But my console says [vue-router] Route with name 'home.about' does not exist for $router.push({ name: 'home.about' }).
What I'm missing?
Obs: The idea is to not route to the child using a hard route path.
844
As an example, if you have a child route edit/:id and your id is an URI formatted like /api/something/123 then in order to get to your parent using a relative route you need to use [../../../..'] .
Just like we had a <router-outlet></router-outlet> for the root application component, we would have a router outlet inside the ProductDetails component. The components corresponding to the child routes of product-details would be placed in the router outlet in ProductDetails .
A child route is like any other route, in that it needs both a path and a component . The one difference is that you place child routes in a children array within the parent route.
You can create a nested routing by defining child routes using the children property of a route (alongside a path and component properties). You also need to add a nested router-outlet in the HTML template related to the component linked to the parent route (In our case it's the admin route).
All you need to define child routes is to add an array of additional route configuration objects as part of a children key in your parent configuration. Here’s an example configuration: And don’t forget to add a router-outlet directive in the template of any parent component:
A route can have one or more than one child routes. Child routes can have their own child routes and so on. A route is created using Angular Route interface and array of Route is Routes type. Route has different properties to handle route such as path, component, outlet, children, loadChildren etc.
The router then takes the remainder of the URL segment ‘detail/id’ and continues to search for the child routes of Product route. It will match it with the path ‘detail/:id’ and instantiates the ProductDetailComponent and renders it in the <router-outlet> directive present in the ProductComponent
You don’t have to necessarily have paths to all your routes. Let’s take this variation on the previous configuration for example: Notice how the route with the ChildComponent component doesn’t have a path.
You have a typo.
It should be children and not childs.
export default [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue'),
children: [
{
name: 'home.about',
path: '/about',
component: import('@/views/Home/About.vue')
}
]
}
]
const router = new VueRouter({
routes: [{
path: '/foo',
name: 'foo',
component: Foo,
children: [
{
path: 'fooChild1',
name: 'fooChild1',
component: FooChildComponent
},
{
path: 'fooChild2',
name: 'fooChild2',
component: FooChildComponent
}
]
}, {
path: '/bar',
component: Bar
}]
})
Now if you wish to navigate to fooChild1 then use $router.push({ name: 'fooChild1' }) or if you wish to navigate to fooChild2 then use $router.push({ name: 'fooChild2' })
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
