I see an error in my console when I use this function in my vuejs router.
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Root',
component: ListProject
}
,
{
path: '/theme/:slug/:id',
name: 'Thematic',
component: Thematic,
}
],
scrollBehavior() {
return { x: 0, y: 0 }
}
})
In my case, I would like to go back to the top of the page every time we go to a new page
Error
element.geometry is undefined
Related
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
),
},
],
},
],
},
];
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
}
]
}]
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.
I have a dynamic iron route with the template explicitly set, however iron router attempts to render the path instead of the template.
http://localhost:3000/blog/example-post
Couldn't find a template named "Blog:permalink" or "blog:permalink". Are you sure you defined it?
Router.route('/blog/:permalink'), {
template: 'blogPost',
name: 'blogPost',
path: '/blog/:permalink',
data: function () {
return Blogs.findOne({ permalink: this.params.permalink, published: true });
}
}
Router.route('blog'), {
path: '/blog',
waitOn: function () {
return [
Meteor.subscribe('blogs')
]
}
}
You closed route ) without adding there the options object ( see , after ) ). That's why iron:router tries to generate template name from path:
Router.route('/blog/:permalink'), {
Should be:
Router.route('/blog/:permalink', {
template: 'blogPost',
name: 'blogPost',
path: '/blog/:permalink',
data: function () {
return Blogs.findOne({ permalink: this.params.permalink, published: true });
}
})