I am working on an angular sample app. The effect I want to get is the following:
I have a login page. When you login, you see the 'home' page. Right now, the home page is a simple html protected by authguard. I want this page to have a header section and body section. This is similar to gmail where the section at the top remain the same for all actions. For eg, the ability to logout appear in the top.
I want couple of routed in this header section that will load the different components in the body section.
This is what I have and does not seem to work.
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]
, children: [
{path: 'home', component: HomeComponent, pathMatch: 'full'},
{ path: 'compb', component: ComponentB, outlet: 'list' },
{ path: 'compa', component: ComponentA, outlet: 'list' }
]
},
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
my home.component.html
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
<p><a [routerLink]="['/compb']">CompB</a></p>
<p><a [routerLink]="['/compa']">CompA</a></p>
<br/><br/>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
Here is starting of the body!
<router-outlet name="list"></router-outlet>
Here is ending of body!
</div>
</div>
</div>
compA and compB are simple html pages to display "coponentA here" and "ComponentB here"
Any guidance will be much appreciated.
After some effort, I got it to work with child routes.
In my app.routes.ts, I initially had :
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]
, children: [
{path: 'home', component: HomeComponent, pathMatch: 'full'},
{ path: 'compb', component: ComponentB, outlet: 'list' },
{ path: 'compa', component: ComponentA, outlet: 'list' }
]
},
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
I changed it to the following:
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], children:homeRoutes },
// { path: 'home', component: HomeComponent, canActivate: [AuthGuard]
// , children: [
// {path: 'home', component: HomeComponent, pathMatch: 'full'},
// { path: 'compb', component: ComponentB, outlet: 'list' },
// { path: 'compa', component: ComponentA, outlet: 'list' }
// ]
// },
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
I added the following to home.routes.ts
export const homeRoutes: Routes = [
{ path: 'compa', component: ComponentA },
{ path: 'compb', component: ComponentB },
];
In my home.component.html, I added the following:
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
<p><a [routerLink]="['compb']">CompB</a></p>
<p><a [routerLink]="['compa']">CompA</a></p>
<br/><br/><br/><br/><br/><br/>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
Here is starting of the body!!<br/>
<router-outlet></router-outlet>
Here is ending of body!!
</div>
</div>
</div>
Related
this is my router
const router = createRouter({
linkActiveClass: "active",
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: DefaultLayout,
children: [
{
path: 'tucs',
name: 'tucs',
component: () => import('../views/tuc/index.vue'),
},
{
path: 'tucs/:id',
name: 'tuc',
component: () => import('../views/tuc/_id.vue'),
},
]
},
]
})
and this is navigation bar
<div class="side-container">
<router-link to="/tucs">TUC</router-link>
<router-link to="/users">Users</router-link>
</div>
when I am in '/tuc' rout router link get both active and exact-active classes But when I navigate to '/tuc/1' it doesn't get active class
what's the problem ?
I create a website template with mock data by using vue & vuetify.
I have different pages like:
localhost:8080/home
localhost:8080/exp
localhost:8080/skills
localhost:8080/about
I would like to use this template for each user and change the structure to this:
localhost:8080/username/home
localhost:8080/username/exp
localhost:8080/username/skills
localhost:8080/username/home
I don't know whether this is the best practice and also I don't know how to do it.
I think that I will use firebase to store and get user related data. Also I am open for any suggestions.
When I go localhost:8080/user/1 I can see everything in User.vue however when I go localhost:8080/user/1/home nothing is rendered. (localhost:8080/home works. I can see everything inside User.vue & Home.vue as well.
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/exp',
name: 'exp',
component: Exp
},
{
path: '/skills',
name: 'skills',
component: Skills
},
{
path: '/about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>
You need to do this in the router. like this:
{
path: 'username',
meta: { label: 'Username'},
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'home',
name: 'Home',
component: Home
},
{
path: 'exp',
name: 'Exp',
component: Cards
},
{
path: 'about',
name: 'About',
component: About
},
{
path: 'other',
name: 'Other',
component: Other
}
]
}
So u add childs to your path.. this makes the url look like /username/exp
The main problem was using ' / home' in the path. This is why it goes localhost:8080/home instead of localhost:8080/user/1/home
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'home',
name: 'home',
component: Home
},
{
path: 'exp',
name: 'exp',
component: Exp
},
{
path: 'skills',
name: 'skills',
component: Skills
},
{
path: 'about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>
So, I have a layout like this:
<div class="page-container">
<app-header></app-header>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<app-side-nav></app-side-nav>
<app-broadcast-show></app-broadcast-show>
<router-outlet></router-outlet>
</div>
</div>
</div>
And all components are working well with this, except for one. This is my Router array:
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{
path: 'admin', component: MainComponent, children: [
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'fund_transfers/deposits',
component: FundTransfersComponent,
children: [
{
path: 'edit',
component: DepositComponent
},
],
},
{
path: 'fund_transfers/withdrawals',
component: FundTransfersComponent,
},
{
path: 'profile',
component: ProfileComponent
},
{
path: 'broadcast',
component: BroadcastCreateComponent
}
]
},
];
Route
children: [
{
path: 'edit',
component: DepositComponent
},
],
Doesn't show when I click on a button that is leading there. I registered Component, created it like I created the rest of the components that are working, but it is not triggering constructor nor onInit, nor is it hiding the previous view and showing the deposit/edit.
Anybody has any solution to this?
Found out whats going on. If using route as child, then in the parent html I need to set router-outlet, not in the first in line, in my case, admin, but rather in fund_transfers/deposits.
I have appRoutes in my Angular 2 app
const appRoutes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{
path: 'component-two', component: AppComponent2,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
]
},
];
How I can redirect from my LoginComponent to HomeComponent?
const appRoutes: Routes = [
{
path: '',
component: LoginComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
]
}
];
You have to do this.
you should use redirectTo for default redirect
const appRoutes: Routes = [
{ path: '/login', component: LoginComponent },
{ path: '/home', component: LoginComponent },
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
from Html you can redirect like
<nav>
<a routerLink="/login" routerLinkActive="active">Login</a>
<a routerLink="/home" routerLinkActive="active">Home</a>
</nav>
inject Router to your HomeComponent's constructor
constructor(
private router: Router,
private service: HeroService
) {}
Then use this.router.navigate(['/login']); in your event function
for more details refer angular guide
My router code is as below. When I am trying to access intro page in DashboardComponent,
it loads intro component but comes back to dashboard, what am I doing wrong?
{ path: '', component: HomeComponent, //home component
children: [
{ path: 'dashboard', component: DashboardComponent } // first child
{ path: 'main', component: ClientComponent, //2nd child
children: [
{ path:'intro', component:ClientsComponent, outlet:intro',
children: [ // grand children
{ path: '', redirectTo: 'list', pathMatch: 'full' },
{ path: 'list', component: ListComponent},
]
},
]}
}
I tried with both navigate and navigateByUrl, none seems to work:
router.navigate(['../main', {outlets: {'intro': ['intro']}}], {relativeTo: this.activatedRoute})
OR
router.navigateByUrl('main/(intro:intro/list)');