We Keep Coding

Nuxt - How to Render Child Route without Parent Content

I am wondering how to display the content of a child page without showing the parent.
I figured this would be straightforward, but I've found nothing about how to do this. My current output has page 'app/parent' rendering some content for the parent, and 'app/parent/child-A' displays that same content from the parent with the child's content at the bottom. I'd like to only display the child's content while maintaining the 'app/parent/child-A' URL.
I suspect that I may be approaching the parent/child functionality in nuxt wrong and there is some better option for what I'm trying to do.

you can use v-if
router.js
....
const page = path => () => import(`./pages/${path}.vue`).then(m => m.default || m);
const routers = [
{
path: '/posts',
component: page('posts/layout'),
props: true,
children: [
{
path: '',
name: 'posts/index',
component: page('posts/index'),
props: true
},
{
path: ':id',
name: 'posts/show',
component: page('posts/show'),
props: true
}
]
},
...
];
...
pages/posts/layout.vue
<template>
<main>
<h1 v-if="$router.name !== 'posts/index'">from parent layout</h1>
<nuxt/>
</main>
</template>

How to create child routes

i just implemented breadcrumb for my project and in routes file it required the child routes in child array. So I did this:
{
path: 'customercreation/:formType',
component: CustomerCreationComponent,
data: {
breadcrumb: 'Customer Creation'
},
children: [
{
path:
':customerId/:stepId/:EntityId',
component: FormComponent,
data: {
breadcrumb: 'Form'
}
},
]
},
But when I am routing to child component, it showing me the parent component, but routes is changing. And in the same case when I am writing child part out side of child array, I mean new routes, then it working properly, What I did wrong in this?

You have to add a <router-outlet></router-outlet> in your CustomerCreationComponent.
There it will output it's children.

Render nested routes as individual pages in VueJS

I'm using VueJS's own router component. In my admin interface, there is one page which shows an overview list and another one with specific options for one single entry.
function configRoutes() {
return [
{
path: '/',
redirect: '/default',
name: 'Home',
component: TheContainer,
children: [
{
path: 'admin/viewerRoles',
name: 'List',
component: AdminViewerRoles,
children: [
{
path: ':id-:name',
name: 'Settings',
component: AdminViewerRoleSettings
}
]
}
]
}
]
}
With that approach, I can place a <router-view /> tag in my AdminViewerRoles component. This will render the details page as viewport. What I wonder is, if it is possible to render either of the views without giving up the syntactically correct, nested navigation approach.
My idea would be to place the <router-view /> tag and the normal page content in two different div elements and render them conditionally with v-if. But is that really the best approach?
This would be my idea (untested):
<template>
<div v-if="$route.params.id">
<router-view />
</div>
<div v-else>
<table>...</table>
</div>
</template>

Ionic 4 and using material tabs router outlet

I am wanting to use Material Tab's (https://material.angular.io/components/tabs/api#MatTabLink) within my Ionic 4 project, now, the requirements are that I need to house multiple views in a tab and the first thought was that I can use a new ion-router-outlet or router-outlet within my parent component.
Bare in mind that I do already have one router outlet for the main app.
I am lazy loading the main chat routes in my app-routing.module.ts, this page is responsible for loading the tabs.
{ path: 'chat', loadChildren: './chat/chat.module#ChatPageModule', canActivate: [ AuthGuard ]}
Now, in my chat.module.ts I have the following routes:
{ path: '', component: ChatPage },
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
ChatPage component is my parent tab view page. The others I am wanting to be in a tab.
The HTML for displaying these tabs is in chat.page.html and looks like this:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of routeLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{ link.label }}
</a>
</nav>
<router-outlet></router-outlet>
I have also tried <ion-router-outlet></ion-router-outlet> but this throws up more issues.
The main issue here is that the routes look as though they are loading up in the main router outlet rather than the child one, I have tried adding the name attribute to the mark up but my IDE states that it's not valid and doesn't seem to work.

Ok, I have figured it out, and I am going to look stupid for not trying this before but the issue was that in order to use this child router-outlet the routes I wanted in tabs need to child routes.
{ path: '', component: ChatPage, children: [
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
] },

Angular 6 child route's lifecycle not triggered when parent has an assigned component

I'm using Angular 6 auxiliary routes for bootstrap modals but I have encountered a problem where the child route's components lifecycle hooks aren't called if the parent route has a component assigned to it. I'm using the lifecycle hooks to trigger the modal as soon as the component has been loaded. My goal is that the "myMenuComponent" should be visible in the background while the modal is active.
ngAfterViewInit() {
$('#modal').modal('toggle')
}
The following routing works and triggers the lifecycle hook as intended but doesn't give me the menu I want to see in the background:
{
path: 'mypath',
children: [
{
path: 'modal',
component: myModalComponent,
outlet: 'modalOutlet'
}
]
}
The following route doesn't trigger any lifecycle hooks:
{
path: 'mypath',
component: myMenuComponent,
children: [
{
path: 'modal',
component: myModalComponent,
outlet: 'modalOutlet'
}
]
}