We Keep Coding

Vue Router : Cant define children for default OR main components

First of all I'm learning Vue JS 2 since about a week and I'm stuck on a problem with Vue Router. I'm pretty sure the solution is right in front of my eyes but I wasn't able to find it yet.
So : On my root route I have 2 views in components Home and NotAuth.
My aim is to display the Login component and others routes related to it when the user isn't logged.
And when the user logs in the Home component is displayed on '/' and all login related routes are not accessible by him.
It works when I'm logged if I try to access '/register' Im instantly redirected to 'Home'.
But when I'm not logged if I try to access say '/add_device' a blank page is displayed.
What I'd like to do is define other routes as Home's children but I cant find anything in the doc explaining how to do so.
I've tried several things and none worked and I'm kind of lost on how to proceed.
If anyone has a clue on how to proceed that would be awesome.
Thanks !!
index.js
const routes = [
{
path: '/',
name: '',
components: {
login: NotAuth,
default: Home
},
children: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/reset',
name: 'ResetPassword',
component: ResetPassword
},
{
path: '/reset-sent',
name: 'ResetSent',
component: ResetSent
},
{
path: '/change-password/:token/:mail',
name: 'ChangePassword',
component: ChangePassword
},
{
path: '/confirmation',
name: 'Confirmation',
component: Confirmation
}
]
},
{
path: '/add_device',
name: 'device',
component: Device
},
{
path: '/add_scene',
name: 'scene',
component: Scene
},
{
path: '/add_room',
name: 'room',
component: Room
},
]
App.vue
<div id="app">
<router-view v-if='userAuthenticated' :username='this.user.first_name' :user='this.user'></router-view>
<router-view name="login" v-else #isAuth='handle'></router-view>
</div>

How to use Router link active for all children

I have side nav with nested routes.my in click on the first button inside navbar it goto the doctors/doctors-list and router link active work perfectly. but I have other children routers like doctors/creat, doctors/update:id when I am going to those routes my router link is not activated as expected. my app structure is when the user first clicks on the doctor button it doctors/doctors-list
when user select doctor from the list route will be changed to the 'doctors/update:id'.how to slove this issue
<a routerLink="doctors/doctors-list" routerLinkActive="active"></a>
my routes config
{
path: 'doctors',
component: DoctorsHomeComponent,
children: [
{
path: 'doctors-list',
component: DoctorsComponent,
},
{
path: 'doctors/creat',
component: DoctorsPageComponent,
},
{
path: 'update-doctor/:id',
component: DoctorsPageComponent,
}
]
}

Have you try this
#Component
import { Router } from '#angular/router';``
constructor(public router: Router) {}
isdoctorsActive(exact) {
return this.router.isActive('doctors/', exact);
}
#html
<a routerLink="doctors/doctors-list" [ngClass]="{'active': isdoctorsActive(false)}"></a>

Have you added the following tag in your doctor components html page
<router-outlet></router-outlet>

You need to use lazy routing here -
In your app-routing.module.ts you can load doctor module like below code
const routes: Routes = [
{
path: '',
component: LandingComponent,
},
{
path: 'doctors',
loadChildren: 'doctor.module#DoctorModule'
}
];
Once it loads doctor module then it loads the component which it founds in the URL
Below code will be in your doctor-routing.module.ts
const routes: Routes = [
{ path: 'doctors-list', component: DoctorsComponent},
{ path: 'create', component: DoctorsPageComponent},
{ path: 'create/:id', component: DoctorsPageComponent}
];
Above routes you can use like this -
It loads doctors component
<a routerLink="doctors/doctors-list" routerLinkActive="active"></a>
It loads doctors page component in create mode
<a routerLink="doctors/create" routerLinkActive="active"></a>
It loads doctors page component in edit mode
<a routerLink="['doctors/create', id]" routerLinkActive="active"></a>

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- How to route parent/child with repeated component?

I'm trying to figure out the cleanest way to set up my Angular routing.
I have a parent route, and inside as a child, I'd like to repeat the same component multiple times (a list of all the locations). Each of the location (child) component occurrences will look the same, just with different data that I will need to pass in. (I'll do this with *ngFor).
Here's what I'm thinking so far:
<router-outlet>//for the parent
<router-outlet name="aux">
<ul *ngFor="let location in service.locations"
</router-outlet>
//where I list out all the locations^
</router-outlet>
on my app-routing.module.ts file:
const routes: Routes = [
{ path: 'main', component: MainComponent }, //lists all locations
{ path: 'locations/:id', component: LocationsComponent }, //view 1
location
{ path: '', pathMatch: 'full', redirectTo: '/main},
];
(I want to have both parent and child appear on initial load. Should I modify that?^)
Now this is the part I don't understand as much, I need to set my route configs. Is this close? And does it goin my app-routing.module.ts file as well?
#RouteConfig([
{path:'/', name: 'MainPath', component: MainComponent,
useAsDefault: true},
{aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])
Thanks! Please let me know if you need clarification.

Use child routes, but do not render them in a router-outlet

I have a code where router config looks like:
{
path: 'users',
component: UsersComponent,
children: [
{
path: 'add',
component: AddUserComponent
}
]
}
By that I'd like to have two pages:
/users - which shows users list
/users/add - which shows a form to add a new user
But I don't what to have nested router-outlet tags. Both pages I'd like to render in the same, main container which is app-root. I know I can do that just by:
{
path: 'users',
component: UsersComponent
},
{
path: 'users/add',
component: AddUserComponent
}
But you probably agree with me that this is not a nice solution and it'd be good to use children construction.
How can I do that?

You don't need a nested route if you don't have a component assigned to the route => just don't add the component to the definition of the users route and make a dedicated empty path for the list page:
{
path: 'users',
children: [
{
path: '',
component: UsersComponent
},
{
path: 'add',
component: AddUserComponent
}
]
}
There is a drawback here: if you use a routerLink inside of UsersComponent where you will use relative path, the empty path will behave still as a path. So you would need to use relative path similar to ../add and not ./add as normally one would think

Check this code:
{
path: 'users',
component: UsersComponent,
children: [
{
path: '',
component: UsersComponent
},
{
path: 'add',
component: AddUserComponent
}
]
}