This is my app-routing-module.ts
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: ':id/:name', component: ChildComponent }
]
}
]
},
];
I've written a function to check if the URL is working with a static value in parent.component.ts.
goToChild() {
this.router.navigate(['1/john'], { relativeTo: this.route });
}
And I call the function in the parent.component.html.
<button class="btn btn-primary" (click)="goToChild()">Search</button>
When I click the button, I get the correct URL in the address bar,
localhost:3000/parent/1/john
But the view never loads, it stays on the parent.component.html. I'm fairly new to Angular and I'm using version 5.
And if I have my routes like this, it works fine.
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'parent',
component: ParentComponent
},
{
path: 'parent/:id/:name', component: ChildComponent
}
]
},
];
It feels more appropriate for me to put the ChildComponent route under children array of the ParentComponent, but when I do it. Only the URL changes, not the view.
Any help will be much appreciated.
You need to add a <router-outlet></router-outlet> inside the template. That’s how you allow child navigation
Related
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>
im building a website and using vvue with vue-router.
My Navbar component iterates through the routes element and gets all routes to show in the navbar, so i can simply add and remove routes without changing the navbar component.
Now i want for example the Data protection notice or the legal notice not to show up.
I tried to solve this with a boolean and a v-if. Do you have any idea how to solve this problem?
My code looks as following:
Navbar component:
<template>
<div>
<div class="mdheader"></div>
<div class="md-layout-item">
<md-tabs md-sync-route class="md-primary" md-alignment="centered">
<div
v-for="r in this.$router.options.routes"
:key="r.name"
:v-if="r.showOnBar"
>
<md-tab :md-label="r.name" :to="r.path" exact></md-tab>
</div>
</md-tabs>
</div>
</div>
</template>
<script>
export default {
name: "navbar"
};
</script>
router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "#/views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
showOnBar: true
},
{
path: "/about",
name: "About",
showOnBar: true,
component: () => import("#/views/About.vue")
},
{
path: "/aktuelles",
name: "Aktuelles",
showOnBar: true,
component: () => import("#/views/Aktuelles.vue")
},
{
path: "/datenschutz",
name: "Datenschutz",
showOnBar: false,
component: () => import("#/views/Datenschutz.vue")
}
];
const router = new VueRouter({
routes
});
export default router;
Thanks in advance
Youa re very close, but you need to wrap your custom property in meta option:
const routes = [
{
path: "/",
name: "Home",
component: Home,
meta: { showOnBar: true }
},
{
path: "/about",
name: "About",
meta: { showOnBar: true }
component: () => import("#/views/About.vue")
},
{
path: "/aktuelles",
name: "Aktuelles",
meta: { showOnBar: true },
component: () => import("#/views/Aktuelles.vue")
},
{
path: "/datenschutz",
name: "Datenschutz",
meta: { showOnBar: false }
component: () => import("#/views/Datenschutz.vue")
}
];
and access it via route.meta.showOnBar. Keep in mind that you only need to define it for routes you want to show on your navbar.
You need to wrap your custom route properties into meta as stated in BroiSatse's answer.
However, another issue is that you used :v-if (i.e. you bound the v-if attribute) instead of just using v-if. v-if already evaluates the condition in the value as per the docs.
Here's a sandbox to play around with: https://codesandbox.io/s/stack-overflow-q-62409392-6zovw?file=/src/router/index.js
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
}
]
}
I have a list of path I want to apply CanActivate to all path except some path.Is there any way in angular to discard some path.
Currently I am applying canActivate to all the URLs.If there are lots of URL,We don't want to apply it to all the URL, I will apply to parent path.
But if we apply to parent it will be applicable to all children also. Is there any way to discard some of the children.
const routes: Routes = [
{ path : '', component: UsersListComponent, canActivate:[AuthenticationGuard] },
{ path : 'add', component : AddComponent, canActivate:[AuthenticationGuard]},
{ path : ':id', component: UserShowComponent },
{ path : 'delete/:id', component : DeleteComponent, canActivate:[AuthenticationGuard] },
{ path : 'ban/:id', component : BanComponent, canActivate:[AuthenticationGuard] },
{ path : 'edit/:id', component : EditComponent, canActivate:[AuthenticationGuard] }
];
It is not possible to discard some children, but you may break your routes in such a way that Guard applies to some and not to some,
Try below,
{
path: 'parentPath',
component: ParentComponent,
canActivate: [AuthGuard],
children: [
{path : 'child1', component: ChildComponent1},
{path : 'child2', component: ChildComponent2}
]
},
{
path: 'parentPath',
component: ParentComponent,
children: [
{path : 'child3', component: ChildComponent3}
]
}
If you design your routes like above, Guards will only be applied to child1 and child2, and not on child3.
In this way you can easily apply Guard at parent level for some of the children.
Here is a Plunker!!
Is there a way to define a dynamic route with fixed set of values? And if it doesn't fit any of the fixed values it would fallback to the next route. My current is like this -
const routes = {
path: '',
component: AppComponent,
childRoutes: [
{ path: '/search/top', name: 'top', component: FixedSearchComponent},
{ path: '/search/new', name: 'new', component: FixedSearchComponent},
{ path: '/search', name: 'search', component: SearchComponent},
{ path: '/search/:query', name: 'search', component: SearchComponent},
]
}
But I'd like to define a parameter for it like :fixedSearch maybe and have it predefined to only be this values. Maybe something like this? And if it doesn't fit any of top or new (or other possible set), it would fallback to search.
const routes = {
path: '',
component: AppComponent,
childRoutes: [
{ path: '/search/:fixedSearch', name: 'fixedSearch', fixedSearch: ['top', 'new'], component: FixedSearchComponent},
{ path: '/search', name: 'search', component: SearchComponent},
{ path: '/search/:query', name: 'search', component: SearchComponent},
]
}
You could attach an onEnter function a new route, like /fixed/:fixedSearch that replaces /search/new and /search/top. Inside the onEnter function you would compare :fixedSearch to your predefined values (['top', 'new']) and if they don't match you can fallback to your /search route. This is common for checking if a user is authenticated before allowing access to a route.
Here's the documentation for onEnter:
onEnter(nextState, replace, callback?)
Called when a route is about to be entered. It provides the next
router state and a function to redirect to another path. this will be
the route instance that triggered the hook.
If callback is listed as a 3rd argument, this hook will run
asynchronously, and the transition will block until callback is
called.
A rough example (in JSX) might look like:
<Route path='/fixed/:fixedSearch' component={FixedSearchComponent} onEnter={checkFixedSearch} />
function checkFixedSearch(nextState, replace) {
if (*Compare :fixedSearch with predefined values*) {
replace('/search') // move to search route if fixed values don't match
}
}