I want to route with an Id between the pages. I do so with [routerLink]. But when I run the app I get an error: Error: Cannot find module '../friend/friend-details.module'. I suppose that I didn't type in correctly the path but I wouldn't know what I could try further. So I want to navigate to friend-details and pass on the id so it know which item it was. The friend-details folder is in the friend folder, so the path should actually work.
page.html
<ion-card *ngFor="let friend of loadedFriends">
<ion-avatar [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>
tabs.router.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage, //render component that holds your tabs
children: [
{
path: 'friend',
children: [
{
path: '',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
},
EDIT:
I tried a solution in which I used a click event:
openFriendDetails() {
this.router.navigate(['friend/:id']);
}
which I take access from app-routing.module.ts
{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },
The navigation works after this change. But somehow I can't make use of my id since the friend-details page is frozen somehow and I can't change my page anymore.
first you need to change your children to this
children: [
{
path: '',
pathMatch: 'full',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
then also you need to add path: '', component: yourcomponent in your FriendDetailsPageModule routing
check your friend-details module path and put id as second router link param. for example : [routerLink]="['/tabs/friend', friend.id]" this will generate the route /tabs/friend/:friendId and you can access by ActivatedRoute.params.friendId into your component
You mention that:
The friend-details folder is in the friend folder, so the path should actually work.
Are you being accurate with your words? If so the path should be:
../friend/friend-details/friend-details.module#FriendDetailsPageModule
Related
Setup: vue 2.6.14 & vue-router, my router config:
{
mode: 'history',
base: document.location.pathname,
routes: [
{
path: '/',
name: 'main',
component: Main,
props: (route) => {
return {
id: route.query.id,
};
},
pathToRegexpOptions: {
strict: true,
},
},
],
}
Problem: I have urls like this
local.host/page/xxx_111.html?id=111
The router base is /page/xxx_111.html path. At some point I would like to change the url via programmatic navigation to just
local.host/page/xxx_111.html
in other words, to get rid of query params, but whatever I do, I always get
local.host/page/xxx_111.html/
with trailing slash :( How to solve this?
Solved by making router's path: '/*([\\w\\-]+_?[\\d]+.html)' which matches any url of type local.host/<ANYTHING>/xxx_111.html and calls like this.$router.push({ query: {} }) to get rid of url param w/o adding trailing slash to the url.
I'm trying to create a route to add a locale prefix for all the routes, I got it working using this code:
routes: [{
path: '/:lang',
component: {
template: '<router-view />'
},
children: [
{
path: '',
name: 'home',
component: Home
},
{
path: 'about',
name: 'about',
component: About
},
{
path: 'contact',
name: 'contact',
component: Contact
}
]
}]
For the default locale en I don't want to set this prefix so params.lang is going to be the full path in this case and not the locale code, so requesting any path without a locale code will render the Home component which matches.
So how can I do this? Does a navigation guard like beforeEnter help in this case?
Actually you can do it without navigation guards. The main goal here is to let the router understand when you have a url without :lang parameter. To distinguish between the language prefixes and the actual paths you could use a regex pattern for the :lang param like: (de|fr|en|zu) (whatever list of codes is suitable for you). And make the :lang to be an optional ?.
So something like this should work: path: '/:lang(de|fr|en|zu)?' At least it works for me :) ...
So now if you request /about or /de/about both would match About.. however the first one will have params.lang === undefined. So I guess whenever you set your locale you can do: const locale = this.$route.params.lang || 'en'
here is the documentation for Advanced Matching Patterns
routes: [{
path: '/:lang(de|fr|en|zu)?',
component: {
template: '<router-view />'
},
children: [
{
path: '',
name: 'home',
component: Home
},
{
path: 'about',
name: 'about',
component: About
},
{
path: 'contact',
name: 'contact',
component: Contact
}
]
}]
My routes for the application are
const router = new VueRouter({
mode:'history',
routes:[
{
path:'/home',
name:'home',
component: Home
},
{
path: '/services',
name: 'services',
component: Services
},
{
path:'/blogs',
name:'blogs',
component:Blogs
},
{
path:'/pingme',
name:'pingme',
component:Pingme
}
],
})
Now, in services route I want to navigate to the which is present in the Home component. How can I create router so as to navigate to the services div when the services link is clicked?
Let's say you want to bring in focus to a specific div in the Service component.
we will make use of query params to achive this. You add add a dedicated url as well which will do this.
This is my route:
{
path: '/services',
name: 'services',
component: Services
}
Then in the url localhost:8000/services?show=mydiv and in the mounted hook of the component do something like this:
mounted() {
// add a id to the div we want to bring in foucs
// and id and the id is paased the query params
document.getElementById(this.$route.query.show).scrollIntoView()
}
Let me know if it works for you.
Edit
Another way we can make this work is by using a watcher and a computed property.
First add a computed property for the show query param in the route.
computed: {
show() { return this.$router.query.show }
}
Then add a watcher to trigger the focus.
watch: {
show: {
immediate: true,
handler(value) {
document.getElementById(value).scrollIntoView();
}
}
That should work in all cases.
I have one problem in developing Angular project.
I tried to find the solution on how to implement the route relative redirects with
When the URL redirects, in which origin redirect has its relative the query params and the fragment.
For example, in the guide of Angular.io.
const heroesRoutes: Routes = [
{ path: 'heroes', redirectTo: '/superheroes' },
{ path: 'hero/:id', redirectTo: '/superhero/:id' },
{ path: 'superheroes', component: HeroListComponent },
{ path: 'superhero/:id', component: HeroDetailComponent }
];
in hero-detail, goback() function to navigate back to the HeroListComponent.
I added relativeTo: this.route. But it is not working.
gotoHeroes(hero: Hero) {
let heroId = hero ? hero.id : null;
// Pass along the hero id if available
// so that the HeroList component can select that hero.
// Include a junk 'foo' property for fun.
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }], {relativeTo: this.route});
}
When configuring to redirect to superheroes, I don't know how to implement this feature.
You need a relative route, so depending on where you are, this should work to go back:
this.router.navigate(['../', { id: heroId, foo: 'foo' }, {relativeTo: this.route}]);
You can use something like -
this.router.navigate(
['hero','12345'],
{
relativeTo: this.route,
queryParams: {
type: 'value',
},
}
);
I'm trying to update my app to use the new v3 router than the angular team just announced http://angularjs.blogspot.com.au/2016/06/improvements-coming-for-routing-in.html and I'm having issues navigating between pages in my app, here are my routes
{ path: '/list', component: UserListComponent, index: true},
{ path: '/payrates', component: AdjustPayrateComponent },
{ path: '/assign', component: AssignUserComponent },
{ path: '/edit/:userId', component: EditUserComponent },
{
path: '/documents',
component: DocumentComponent,
children: [
{ path: '/', component: DocumentComponent, index: true },
{ path: '/:id', component: DocumentComponent },
{ path: '/upload', component: DocumentUploadComponent }
]
},
I want to navigate from the /list page to the /documents/:id page to view documents from a user on the list page.
viewDocuments(user: UserList) {
this.router.navigate(['/documents', { id: user.UserId }], { relativeTo: this.route });
}
However I'm getting the error 'Outlet is not activated' and not sure what this means. I'm basing my app off the example at http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview
If anyone has any example or advice on how to do navigation with the new router anything would be appreciated, thanks!
figured out the problem, I had a leftover <router-outlet> directive inside my list page, and I guess when trying to navigate from that page the router was trying to load into that bad outlet.