I have the following routing-modules:
app-routing.modules.ts
...
const routes: Routes = [
{
path: '',
loadChildren: () => import('./startpage/startpage.module').then(m => m.StartpageModule)
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then(m => m.UserModule),
canActivate: [AuthGuard]
},
{
path: 'shop',
loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule),
canActivate: [AuthGuard]
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
];
...
and shop-routing.modules.ts
const routes: Routes = [
{
path: '',
redirectTo: 'user',
pathMatch: 'full',
},
{
path: ':id',
component: ShopPageComponent
}
];
The problem is, since I'm starting the child route of 'shop' with ':id', it acts as a 'catch-everything' route. If i call 'localhost:4200/user' now, it loads the shopcomponent. Why is that like that? I thought 'shop' was the main route and the ':id' child is only called, when the link has 'shop/' as prefix. If I put 'shop/:id' before, it works fine, but then the route is also callable via 'localhost:4200/shop/shop/something' which is ugly and also my authGuard isn't working anymore.
App-routing.module.ts
const routes: Routes = [
{
path: '',
loadChildren: () => import('./startpage/startpage.module').then(m => m.StartpageModule),
pathMatch: 'prefix'
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then(m => m.UserModule),
canActivate: [AuthGuard],
pathMatch: 'prefix'
},
{
path: 'shop',
loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule),
canActivate: [AuthGuard],
pathMatch: 'prefix'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
pathMatch: 'prefix' will check for prefix path only and checks for child path for the rest of the path.
Related
http://localhost:4200/dsc-ui/#message and if I type in the URL (remove #message and type application-management)
http://localhost:4200/dsc-ui/application-management (/application-management), it should redirect me to http://localhost:4200/dsc-ui/#/application-management. For any other route stay on http://localhost:4200/dsc-ui/#message.
How can i achieve this using angular?
You can set a new route in your Routes array in your router module, e.g.:
{ path: '/application-management', redirectTo: '/message', pathMatch: 'full' }
Are you want to add dynamic routing in your project ?
Or If you want to redirect you system if url is not existing in your system
then find below code
{ path: '', pathMatch: "full", redirectTo: "/yourdefaultcomponent" },
{ path: '404', component: NotFoundComponent },
{ path: '**', redirectTo: '404' }
Is there a way to remove some routes with their linked components from production build of Vue app?
In my app I have manager interface that only I use so there is no need to have it's logic in the production build. I want to avoid having any of manager's code actually used in the production build as I can use the manager page only during development on localhost.
Here is simple example what I have now. The managerCheck tests if user is manager to allow user to enter or to redirect him back to the homepage. This is probably enough as it is also combined with check in MongoDB but I still would love to not includes manager's components logic inside production build as ManagerView includes pretty powerful functions and it is better to be safe than sorry.
// router.js
// ... some imports
const userCheck = (to, from, next) => store.getters['user/user'] ? next() : next({path: '/login'})
const managerCheck = (to, from, next) => store.getters['user/manager'] ? next() : next({path: '/'})
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'App Name',
component: MainView,
},
{
path: '/user',
name: 'User',
component: UserView,
beforeEnter: userCheck
},
{
path: '/manager',
name: 'Manager',
component: ManagerView,
beforeEnter: managerCheck
}
})
In production, unnecessary routes can be filtered out.
Routes can be defined with productionAvailable flag.
routes: [
{
path: '/',
name: 'App Name',
component: MainView,
productionAvailable: true,
},
{
path: '/user',
name: 'User',
component: UserView,
beforeEnter: userCheck,
productionAvailable: true,
},
{
path: '/manager',
name: 'Manager',
component: ManagerView,
beforeEnter: managerCheck,
productionAvailable: false,
}
}]
Then filter it when exporting if the node env is set to production.
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: process.env.NODE_ENV === 'production' ? routes.filter((route) => route.productionAvailable) : routes,
})
I would do something like this:
// router.js
// ... some imports
const userCheck = (to, from, next) => store.getters['user/user'] ? next() : next({path: '/login'})
const managerCheck = (to, from, next) => store.getters['user/manager'] ? next() : next({path: '/'})
const clientRoutes = [
{
path: '/',
name: 'App Name',
component: MainView,
},
{
path: '/user',
name: 'User',
component: UserView,
beforeEnter: userCheck
}
]
const managerRoutes = []
// you may have to look into process.env to set this condition correctly
if (process.env.NODE_ENV !== 'production') {
managerRoutes.push({
path: '/manager',
name: 'Manager',
component: ManagerView,
beforeEnter: managerCheck
})
}
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [...clientRoutes, ...managerRoutes]
})
process.env: https://cli.vuejs.org/guide/mode-and-env.html#modes
I am trying to create a route structure that would allow me to do the following.
Home.vue has one router view
/home/clients should load the Clients component
home/campaigns should load the Campaigns component
home/clients/:id should redirect to /home/clients/:id/campaigns and load the same Campaigns component.
I do not want to introduce another router view inside Clients component to handle the campaigns part. I was trying to get it done with following routes but really can't get it to work.
These are children routes to /home.
UPDATE: I got it working literally writing down every path that I may encounter. Is there a way I can elegantly solve this?
{
path: '/home',
name: 'Home',
component: Home,
beforeEnter(to, from, next) {
if (!store.getters.isLoggedIn) {
next({
path: '/login',
query: {
redirect: to.fullPath
}
});
} else {
next();
}
},
children: [
{
path: 'clients',
component: Clients
},
{
path: 'clients/:clientId',
redirect: 'clients/:clientId/campaigns'
},
{
path: 'clients/:clientId/campaigns',
component: Campaigns
},
{
path: 'clients/:clientId/campaigns/:campaignId',
redirect: 'clients/:clientId/campaigns/:campaignId/ads'
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads',
component: Ads
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads/:adId',
redirect: 'clients/:clientId/campaigns/:campaignId/ads/:adId/postings'
},
{
path: 'clients/:clientId/campaigns/:campaignId/ads/:adId/postings',
component: Postings
},
{
path: 'campaigns',
component: Campaigns
},
{
path: 'campaigns/:campaignId',
redirect: 'campaigns/:campaignId/ads'
},
{
path: 'campaigns/:campaignId/ads',
component: Ads
},
{
path: 'campaigns/:campaignId/ads/:adId',
redirect: 'campaigns/:campaignId/ads/:adId/postings'
},
{
path: 'campaigns/:campaignId/ads/:adId/postings',
component: Postings
},
{
path: 'ads',
component: Ads
},
{
path: 'ads/:adId',
redirect: 'ads/:adId/postings'
},
{
path: 'ads/:adId/postings',
component: Postings
},
{
path: 'postings',
component: Postings
}
]
}
I am getting the following error after configuring child routes.
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'parent/child1
app.routing.ts
{ path: 'home', component: homeComponent},
{ path: 'about', component: aboutComponent},
{ path: 'parent', component: parentComponent,
children:[
{
path: '',
redirectTo: '/parent/child1',
pathMatch: 'full'
},
{
path: 'child1',
component: child1Component,
outlet: 'subRouter'
},
{
path: 'child2',
component: child2Component,
outlet: 'subRouter'
}]
},
{ path: '**', redirectTo: 'home', pathMatch: 'full' }
In my index.html, I have <router-outlet></router-outlet>
In my parent.htm(parentComponent) I have <router-outlet name="subRouter"></router-outlet>
What am i missing? Why i am getting that error? How can i resolve this error?
The parent route children '' path redirection should changed to below, and explicitly mention outlet:component value.
redirectTo: '/child1(subRouter:child1)'
Because /parent will be implicitly included as you're redirecting from child route.
My current Route config looks like this
{
path: '',
redirectTo: 'register/account',
pathMatch: 'full'
},
{
path: 'register/account',
component: AccountRegisterComponent
},
{
path: 'register/auto/:Id',
component:AutoregisterComponent
},
If a user tries to navigate to '/register/auto'. Currently I see a blank page and an error in the console.
How can I show a 404 error or a message saying that this page is not available globally?
See angular2 cheatsheet
You can do something like this:
{path: '**', redirectTo: '/404' }
So for example you would have something probably like this:
{path: '/404', component: NotFoundComponent},
{path: '**', redirectTo: '/404' }
Hope that helps