A link is fetched from the database, e.g. /app/profile.
A single component (master/index.vue) should render any path following the app's address (http://example.com/).
I have the following router configuration:
{
path: '/',
component: () => import('#/components/Layout.vue'),
children: [
{
path: ':id',
component: () => import('#/components/pages/master/index.vue')
}
]
}
… but this is not working as expected. It only accepts one param after example.com. How do I make it work dynamically so that it accepts multiple params, e.g. /app/profile?
you can use an asterisk to match anything, for example:
path: '*',
if you know the base path will be fixed, you can narrow the match to e.g. /*, /app*.
see the vue-router docs on dynamic matching, under the catch all section.
Related
So I have this section of my vue-router that's causing an issue:
{
component: Tutorial,
name: "tutorial",
path: "/tutorial/:page?",
redirect: "/tutorial/0",
},
If I remove the redirect, the issue is gone. There's no children for this route path either. Is it not possible to assign a default param value?
If you set a default value in redirect part. It will go to /tutorial/0, next it will redirect to /tutorial/0 again and again...
If you want to set a default param value. You can implement it in the Tutorial component.
For example:
// In Tutorial component
beforeRouteEnter() {
this.$route.params.page = this.$route.params.page ? this.$route.params.page : 0
}
because "/tutorial/0" matches "/tutorial/:page?" too.
Since the router configs is First In First out,
you can define your routes like this
{
component: Tutorial,
name: 'tutorial',
path: '/tutorial/0'
},
{
path: '/tutorial/:page?',
redirect: '/tutorial/0'
}
if the current route matches /tutorial/0, it will render your component. If it doesn't match /tutorial/0, Vue will check if it matches /tutorial/:page? and do the redirection if it matches.
I'm building a single-page application in Vue.js. Currently, navigation through the site works properly until you attempt to use the browser navigation buttons (back/forward).
When attempting to navigate with these no pages will be created. The URL will change but no components are loaded, unless you backup to the base URL where the component is loaded.
The templates are not loaded at all, I also have ESlint which shows no errors.
Here is my index.js for the router:
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'search',
component: Search,
},
{
path: '/results?terms=:terms',
name: 'results',
component: Results,
},
{
path: '/review?id=:id',
name: 'review',
component: Review,
},
],
});
I change pages by using: this.$router.push({ name: 'results', params: { terms: this.terms } });
I'm very new to Vue so I'm pretty sure I've just made a stupid mistake, but I've spent way too much time trying to figure this out so some help would be nice. Thanks.
The issue here is that route params should not be passed as query string parameters. They are solely intended for use in the URL path.
For some reason, the router is able to handle programmatic navigation but not direct URL loading.
If you still want to use the query string (as opposed to path parameters), I suggest you change to something like this...
Define props for your components, eg
export default {
name: 'Results',
props: ['terms'],
// etc
Pass the query string variables as props in your route definition
{
name: 'results',
path: '/results',
component: Results,
props: route => ({ terms: route.query.terms })
}
Set query instead of params in your programmatic navigation
this.$router.push({ name: 'results', query: { terms: this.terms } })
I have something like:
const routes: Routes = [
{
path: ':path', component: SiteRoot, children: [
{ path: '', loadChildren: '../modules/maple/template.module#TemplateModule' }
]
}
];
I wish to use this :path url to match multiple module dynamically. each module have there own internal Route.
Is there any way I can achieve this?
I tried ViewContainerRef with ResolveComponentFactory but it does not work with module only component. Event with NgModuleFactoryLoader, Routes cannot be applied.
EDIT, to make everything clear:
What I am trying to achieve is to have different module display on same route path. For example user can see user dashboard at "home" path, and admin can see admin dashboard at "home" path as well.
This feature is defined by business logic, so, I cannot change admin dashboard to another url
I think you are trying to create your routing module incorrectly. Anyway, you should write why you need this. I'll try to answer. Every module should have it's own path, so routing module should be strict and static. If you trying it for security, use guards and hide item from menu component.
If you need URLs like this: "/username1/profile", "/username2/profile" you can simply use code like yours, or use lazy loading. create routing file for parent module:
{ path: ':username', loadChildren: '../users/user.module#UserModule' }
Than create routing file for child module:
{ path: '', loadChildren: 'UserComponent', children: [
{ path: '', redirectTo: 'profile' },
{ path: 'profile', component: ProfileComponent}
]
}
Updated By your case:
by your case you can change your HTML file. For example in app.component.html if your code is:
<div>
<router-outlet></router-outlet>
</div>
You can change it with:
<div *ngIf="isLoggedIn | async">
<admin-panel></admin-panel>
</div>
<div *ngIf="(!isLoggedIn | async)">
<router-outlet></router-outlet>
</div>
I have a feature module that I load in the AppModule, the AppRoutingModule looks like
const appRoutes: Routes = [
...
{
path: 'move-request/:id',
loadChildren: 'app/modules/move_requests/move_requests.module#MoveRequestModule'
},
...
];
And the configuration of routing for the feature module looks like
const moveRequestRoutes: Routes = [
{
path: '',
component: MoveRequestFormComponent,
data: {title: 'Move Request'}
},
{
path: 'move-request-success',
component: RequestSuccessComponent,
data: {title: 'Move request success'}
},
];
I would like to navigate to MoveRequestFormComponent as the default component when move-request/:id is routed to, this works fine, but when I call
this.router.navigate(['/move-request-success', {}]);
In MoveRequestFormComponent after some response from the server, I get
zone.js:665 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'move-request-success' ; Zone: <root> ;
This configuration was working before I switched to Angular 6, Is it because of the change in the AppModule, where I have excluded this feature module as an import?
Any assistance on what I am missing would be much appreciated. As I have also tried with having a third component which will be the default component and uses the router-outlet to render the children and have a children property on this route to have as children
{
path: '',
component: MoveRequestFormComponent,
data: {title: 'Move Request'}
},
{
path: 'move-request-success',
component: RequestSuccessComponent,
data: {title: 'Move request success'}
},
But that also did not work, it stayed on the MoveRequestFormComponent, when 'move-request-success' was navigated to.Or maybe I should change the approach?
You don't have to import the feature module in AppModule as it is lazily-loaded. When you navigate to move-request/:id/move-request-success, the path matches the default route with path:'', and then it will look for and children of that route. You should add pathMatch:'full' to the first route, which is the default in this case. Since the mentioned route matches the first route and is unable to find and match any children, it is showing the error.
this.router.navigate(['/move-request-success', {}]);. If you add a / to a route this means you use absolute path from root. Have you tried without / ?
EDIT:
I think I see your problem. You navigate to a module with multiple components, which means after lazy loading the router configuration from the loaded module is used. This means
move-request/:id
Is the root of your module and every subroute needs to include the modules root in the url:
Your route should be move-request/:id/move-request-success
Urls in lazy loaded modules are:
module root (in your case move-request/:id) + configured route of the specific component (in your case move-request-success)
We're creating a new version of an app, and need to keep legacy routes working. Legacy urls come into our app under a specific route, let's call it legacy.
So, if a route is /legacy/route1, I am going to handle it with a Resolver to tell where it's actually supposed to go within our app (the old url routing scheme is very convoluted and needs quite a bit of logic). However, if it comes in under /legacy/route1/subroute3/somethingelse, I'd like to handle it with the same resolver.
How do I catch all of these routes within a single or a couple of lines in my RouterModule? I've tried all of the below:
{ path: 'legacy', component: Legacy, resolve: [LegacyRouteResolver] },
{ path: 'legacy/', component: Legacy, resolve: [LegacyRouteResolver] },
{ path: 'legacy/*', component: Legacy, resolve: [LegacyRouteResolver] },
{ path: 'legacy/**', component: Legacy, resolve: [LegacyRouteResolver] }
but none of them will give me any routes that come in with multiple slashes, and there are many other circumstances under which they fail (the octothorp seems to throw them off, too)
you can use below,
{
path: 'legacy',
children: [
{path : '**' , component: Legacy}
]
}
this will match all the routes after legacy
Hope this helps!!