I cannot seem to figure out how this is working, I have an app with two router-outlet tags. Neither of the tags have a name associated with them, so how are the components displayed in the correct outlet?
const routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'user',
component: HomeComponent,
children: [
{
path: 'settings',
component: SettingsComponent
},
{
path: 'profile',
component: ProfileComponent
}
]
}
]
Then in the AppComponent template there is this, which shows the LoginComponent and the HomeComponent.
<header></header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
Then in the HomeComponent template there is this, which shows the SettingsComponent or ProfileComponent.
<ul class="nav"></ul>
<div class="content">
<router-outlet></router-outlet>
</div>
From what I have read, you need to have a named outlet and tell the route which outlet to render to. Why do I not need one here? This still works. What is happening? I cannot find a reasoning for this on Google other than to use a route with a name.
nested primary router outlets work fine and are very commonly used, in fact, it's the ONLY way parent / child routes can work.
With nested outlets, the router figures out what to render pretty intuitively, based on the parent / child structure of your route config.
You only need named outlets if they are siblings.
Related
Hello I am currently doing the front end of my project.
I would like to render components dynamically depending on the route.
For example I have a /auth route then it links to /auth/login or /auth/register or /auth/forgot.
This is the place where I would like to see the different components rendered.
I was assuming I can use router-view to loud the different components into the DOM.
<template>
<head-comp></head-comp>
<router-view></router-view>
<footer-comp></footer-comp>
</template>
<script>
import HeaderComp from '../components/Universal/HeaderComp.vue'
import FooterComp from '../components/Universal/FooterComp.vue'
export default
{
components: {
'header-comp' : HeaderComp,
'footer-comp' : FooterComp
}
}
</script>
This is the router
{
path: '/auth',
name: 'auth',
component: () => import('../views/AuthView.vue'),
children: [
{
path: 'login',
name: 'auth.login',
component: () => import('../components/Authentication/LoginComp.vue')
},
],
}
And this is the vue file that will contain the login form.
<tempalte>
Login
</tempalte>
<script>
</script>
The error I get with my current approach is this.
The requested module '/src/components/Authentication/LoginComp.vue?vue&type=tempalte&index=0&lang.tempalte' does not provide an export named 'default'
I was thinking I could just use different views for example, login/registerView.vue instead of having them in components but I feel like this is messier and would make it harder to maintain in the future.
Thanks for reading and looking forward to your responses.
You have typos in your LoginComp.vue component.
<tempalte>
Login
</tempalte>
should be
<template>
Login
</template>
Currently I am working on a project where I have two components with a router-view, Auth and Dashboard. These two components have different html strucutures but use the same base path in routing path: ''.
The routing file would look like:
{
path: '/',
component: Dashboard,
children: [
...
],
path: '/',
component: Auth,
children: [
...
]
}
Ofcourse this will create complications since the paths are the same. Is there any way have a parent component without a path?
You can create a new component that shows the Dashboard or Auth components conditionally, then set that as the component for the '/' path in the routes config.
Something like this:
<template>
<auth v-if="isAuthenticating" />
<dashboard v-else />
</template>
With Angular 2, I could make a child route render "over" its parent by defining an empty path and creating an essentially empty base component. I am trying to accomplish something similar with the new Angular router (version 4.3.1), but have hit a roadblock.
To reproduce my problem, here's a Plunker. The routes are defined as:
[{
path: '',
redirectTo: "/master",
pathMatch: "full"
}, {
path: 'master',
component: MasterComponent,
children: [{
path: 'detail/:value',
component: DetailComponent,
children: [{
path: 'subdetail',
component: SubDetailComponent
}]
}]
}]
When I navigate to a detail page, the master page is still visible because I have added a <router-outlet></router-outlet> to MasterComponent. What I need is to replace the master view with the detail. I can accomplish this by making detail/:value a sibling of master rather than a child, but this isn't logically correct in my application and breaks my breadcrumbs.
Is there any proper way to handle this kind of pattern, or will I have to pick a workaround, such as showing and hiding the intended route or manually specifying a dedicated "main" outlet for every link?
The only existing solution that comes close is to define a dummy parent component, but this only works one-level down. If my detail page has another sub-detail page that should also replace master, it gets very messy.
Is there any route-level flag I can set or design pattern to implement to elegantly accomplish this? I am an Angular 2 beginner, but I feel as though something like this should be simple.
First, there is no "new" router in 4.3.1. It's the same router from 2.x.
Second, there were a few changes I needed to make to your plunker to make it work appropriately. The key change was this in the master.component.ts:
<a [routerLink]="['/detail', 5]">
I added a slash. Without the slash it was looking for a route named master/detail/5
The route definition is now flat, so everything will appear "under" your main header.
export const routes: Routes = [
{
path: '',
redirectTo: 'master',
pathMatch: 'full'
},
{
path: 'master',
component: MasterComponent
},
{
path: 'detail/:value',
component: DetailComponent
}
];
The updated plunker is here: https://plnkr.co/edit/EHehUR6qSi248vQPDntt?p=preview
I have doubt in routing in angular2.
I have a login screen. After login dashboard and other pages had header and footer which will not be in login.
const routes: Routes = [
{
path:'',
redirectTo: '/login',
pathMatch: 'full'
},
{
path:'login',
loadChildren: './auth/auth.module#AuthModule',
},
{
path: 'dash',
loadChildren: './dash/dash.module#DashModule',
canActivate:[AuthGuard],
data: {
preload: true
}
},
{
path: 'project',
loadChildren: './project/project.module#projectModule',
canActivate: [AuthGuard],
data: {
preload: true
}
}
];
So its loading to the router-outlet in the app.component.html.
Currently I have to use the header component in all module html, like in dash.component.html
<ks-header></ks-header>
<router-outlet></router-outlet>
This router-outlet is a child outlet on which other dash related load.
Same like for other modules.
Is there any other effective way to show common header/sidebar?
I tried it in app.component.html like
<ks-header [userInfo] ="userInfo" [hidden]="isLogin"></ks-header>
<ks-sidebar [hidden]="isLogin"></ks-sidebar>
the islogin will determine logined or not. But I don't think it's a good idea.
You should use nested routes.
One for the base, as routeing between the template page and the login page.
The second and the nested one must be accomplished routeing between templated pages like
HOME, ABOUT, CONTACT ...
You can learn more about nested routes from here. So simple explanation.
And there is another question similar to yours. Namek's answer seems useful.
I have the following routes variable defined in my app-routing.module.ts:
const routes: Routes =
[
{ path: '', redirectTo: '/users', pathMatch: 'full' },
{ path: 'users', component: UsersComponent },
{ path: 'dashboard', component: DashboardComponent }
];
With this current configuration, when I submit http://localhost:3000/users, the browser redirects to http://localhost:3000/users/users and then displays the user list binding in the html as expected.
However, something seems off kilter for the browser to redirect from /users to /users/users. If I remove the th first route config with the redirectTo attribute then the browser stays on /users without redirecting to /users/users. However, in this scenario, the user list binding doesn't display as expected.
Any idea what might be causing the redirect to /users/users? Any idea how I can keep the browser on /users and get the user list binding to properly display at this uri?
Option 1: Setting base tag
In order to get the router working properly a base href needs to be defined somehow for the app. The docs recommend adding a base element to the head of your index.html file, such as:
<base href="/">
Option 2: Setting a provider
This can be a bit dangerous however as it has (potentially unexpected) side effects on anchor tags, empty href tags, etc, etc. It also breaks inline svg sprites... which was a major part of our app's UI. If you want to make the router work but not break a lot of things you can actually define the base href elsewhere, like so:
// ... other imports
import { APP_BASE_HREF } from '#angular/common';
#NgModule({
// ... other pieces of ngModule
providers: [
{provide: APP_BASE_HREF, useValue : '/' }
],
// ... other pieces of ngModule
})
export class AppModule {
constructor() {}
}
As a basic example. It's a bit hard to find in the documentation but is a good workaround to get things going without messing with everything else.