Develop Reference

Angular, guard for base route not working

First time when entering http://localhost:4200 BaseLanguageGuard is triggered, but then if I navigate to another route and then click routerLink which navigates me back to http://localhost:4200, BaseLanguageGuard doesn't get called anymore.
What am I doing wrong and how to trigger guard when navigate to base (I mean http://localhost:4200) url?
Routes:
const appRoutes = [
{
path: '',
canActivate: [BaseLanguageGuard],
children: [
{
path: ':lang',
canActivateChild: [FeatureLanguageGuard],
children: [
{
path: '',
loadChildren: () =>
import('./features/mainstream/mainstream.module').then(
(m) => m.MainstreamModule
),
},
],
},
],
},
];

How to add an i18n locale prefix in Vue router for all the locales except for the default one?

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
}
]
}]

How to implement routing with id correctly?

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

How to route to specific div in a component in vuejs 2

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.

How to implement the route relative redirects with the query params and the fragment

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',
},
}
);