I have two pages 'items' and 'address'. Now I am trying to load address page on 'items/address' url, but I am getting redirected to the 'items' page only.
Here is my route on items.module.ts :
const routes: Routes = [
{
path: '',
component: ItemsPage,
children :[
{ path: 'address', loadChildren: '../address/address.module#AddressPageModule' },
]
},
];
I have all the pages in the pages directory.
Thanks in advance
The problem is that the path 'items' is not defined of your url 'items/address'. Here's how I would do it -
const routes: Routes = [
{ path: '', redirectTo: 'items', pathMatch: 'full' },
{
path: 'items', children: [
{ path: '', loadChildren: './items/items.module#ItemsPageModule' },
{ path: 'address', loadChildren: './items/address/address.module#AddressPageModule' },
]
}
];
Related
these are my routes:
const routes: Array<RouteRecordRaw> = [
{
path: "/projects",
component: {},
children: [
{ path: "extensions", component: {} },
{ path: "themes", component: {} },
{ path: ":pathMatch(.*)*", redirect: "extensions" },
],
},
{
path: "/about",
component: {},
children: [
{ path: "experience", component: {} },
{ path: "documents", component: {} },
{ path: ":pathMatch(.*)*", redirect: "experience" },
],
},
{ path: "/:pathMatch(.*)*", redirect: "/projects/extensions" },
];
Expected result:
Navigating to /projects or /projects/asdasd -> redirects to /projects/extensions
Navigating to /about or /about/asdasd -> redirects to /about/experience
Navigating to /asdasdasd -> redirects to /projects/extensions
Current result:
Every incorrect path redirects me to /projects/extensions
I tried many combinations but nothing works as expected, please help.
Redirecting to child route
To redirect /projects to /projects/extensions, add a child route with a blank path that redirects to the target route:
const routes: Array<RouteRecordRaw> = [
{
path: "/projects",
component: () => import("../views/ProjectsView.vue"),
children: [
{
path: "",
redirect: "/projects/extensions", // or use a named route (see below)
},
⋮
],
},
}
Getting the redirect target right
When the redirect string is not an absolute path to a route (i.e., /about/experience), the path would be relative to the current route.
For instance, imagine being at /projects/themes and clicking /about/foo. This is how the final route would resolve:
/about/foo matches the wildcard route under /about, which redirects to /projects/themes/experience.
/projects/themes/experience matches the outer wildcard route, which redirects to /projects/extensions.
There are a couple ways to solve this...
Option 1: Use absolute path in redirect string
const routes: Array<RouteRecordRaw> = [
{
path: "/projects",
component: () => import("../views/ProjectsView.vue"),
children: [
{
path: "extensions",
component: () => import("../views/ProjectsExtensions.vue"),
},
{
path: "themes",
component: () => import("../views/ProjectsThemes.vue"),
}, 👇
{ path: ":pathMatch(.*)*", redirect: "/projects/extensions" },
],
},
{
path: "/about",
component: () => import("../views/AboutView.vue"),
children: [
{
path: "experience",
component: () => import("../views/AboutExperience.vue"),
},
{
path: "documents",
component: () => import("../views/AboutDocuments.vue"),
}, 👇
{ path: ":pathMatch(.*)*", redirect: "/about/experience" },
],
}, 👇
{ path: "/:pathMatch(.*)*", redirect: "/projects/extensions" },
]
demo 1
Option 2: Use named route in redirect object
const routes: Array<RouteRecordRaw> = [
{
path: "/projects",
component: () => import("../views/ProjectsView.vue"),
children: [
{
path: "extensions",
👇
name: "proj-ext",
component: () => import("../views/ProjectsExtensions.vue"),
},
{
path: "themes",
component: () => import("../views/ProjectsThemes.vue"),
}, 👇
{ path: ":pathMatch(.*)*", redirect: { name: "proj-ext" } },
],
},
{
path: "/about",
component: () => import("../views/AboutView.vue"),
children: [
{
path: "experience",
👇
name: "about-exp",
component: () => import("../views/AboutExperience.vue"),
},
{
path: "documents",
component: () => import("../views/AboutDocuments.vue"),
}, 👇
{ path: ":pathMatch(.*)*", redirect: { name: "about-exp" } },
],
}, 👇
{ path: "/:pathMatch(.*)*", redirect: { name: "proj-ext" } },
]
demo 2
Named routes are easier to maintain than paths, as (1) they avoid having to enter long paths, and (2) they could be moved without having to refactor paths.
Using vue-router, we have a nav menu which works, but we need an additional route to be recognized as "active" for the first nav item.
However the user starts their journey at "account/" (the root), which we show the same content for "/profile" as we don't intend on having actual homepage content to live in "account/".
Nav items:
account/profile ---> Needs class "router-link-active" for both "account/" and "account/profile" routes
account/plan
account/receipts
Routes:
const routes = [
{
path: '/account/',
component: ProfileBase,
children: [
{ path: '', name: 'AppHome', component: ProfileHome }
]
},
{
path: '/account/profile',
component: ProfileBase,
children: [
{ path: '', name: 'ProfileHome', component: ProfileHome },
]
},
{
path: '/account/plan',
component: PlanBase,
children: [
{ path: '', name: 'PlanHome', component: PlanHome },
{ path: 'cancel', name: 'PlanCancel', component: PlanCancel }
]
},
{
path: '/account/receipts',
component: ReceiptsBase,
children: [
{ path: '', name: 'ReceiptsList', component: ReceiptsList },
{ path: ':receiptID', name: 'ReceiptsDetail', component: ReceiptsDetail, props: true }
]
}
]
When the application starts, I am setting the default path to users, if authentication fails, then it will navigate to sign in. But it redirects to 404.
const routes = [
{
path: "/signin",
name: "signIn",
component: () => import("#/path"),
},
{
.........
},
{
.......
},
{
path: "/",
redirect: "/users",
component: adminLayout,
//needed for nav gaurd
//meta: { requiresAuth: true },
children: [
{
path: "dashboard",
name: "dashboard",
component: dashboard,
meta: {
title: 'Dashbaord'
}
},
{
path: "users",
component: () => import("path"),
meta: {
title: 'Users'
},
children: [
{
path: "",
component: () => import("path"),
meta: {
title: ''
}
},
{
path: ":id/profile",
component: () => import("path"),
meta: {
title: 'Profile'
}
},
]
},
],
},
{
path: "*",
redirect: "/404",
},
{
// the 404 route, when none of the above matches
path: "/404",
name: "404",
component: () => import("#path"),
},
];
If i set redirect: "/dashboard" or redirect: "/signin",, then it works fine.
Also if I navigate to the right path, like "http://localhost:8080/signin" it will work. But if I only type "http://localhost:8080" hit enter it will go to 404 page
Note : first my users component like this and its works fine
{
path: "users",
component: () => import("path"),
meta: {
title: 'Users'
},
},
{
path: ":id/profile",
component: () => import("path"),
meta: {
title: 'Profile'
},
},
Please help me to understand the issue.
How can I navigate to a child state using $router.push?
My routes:
const routes = [
{
path: "/customers", name: 'Customers',
components: {content: CustomersMain},
props: {header: true, content: false},
children: [
{
path: '',
component: CustomerDetailsEmpty
},
{
path: ':id',
name: 'CustomerDetails',
component: CustomerDetails
}
]
}
];
How can I navigate to CustomerDetails with an id param set using
$router.push?
This did the trick:
this.$router.push({ name: `CustomerDetails`, params: {id} });
I'm working on an Ionic 4 project, I've generated a tabs project.
What I want to do is create a Login page which is the default page.
When a user has signed in successfully I want to navigate to the tabs.
When I'm trying to do this I get the error:
Error: Cannot match any routes. URL Segment: 'tabs'
These are my routes:
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
In my Login Page I have a button as follows:
<ion-button expand="block" [href]="'tabs'" color="light" fill="outline">Sign in</ion-button>
When I generate a different page I am able to navigate to this page using the same way.
I was facing the same issue. I found a solution here. You need to add an additional route to your routes array.
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
Step 1 : Add an additional route to tabs page in your app-routing.module.ts
{ path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
Step 2 : Add the tabs route inside the tabs-routing.module.ts
const routes: Routes =[
{
path:'tabs',
component:TabsPage,
children:[
{
path : 'home',
outlet : 'home',
component : HomePage
},
{
path : 'me',
outlet : 'me',
component : MePage
}
]
}
];
Step 3 : Link to the tabs page
<ion-button href="app/tabs/(home:home)" routerDirection='root'>Tabs</ion-button>
I faced the same issue. My first page is 'Sign In' page by default. I wanted to navigate to tabs module after button click.
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
const routes: Routes = [
{ path: 'app', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './sign-in/sign-in.module#SignInPageModule' },
{ path: 'search', loadChildren: './search/search.module#SearchPageModule' }
];
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
tabs.router.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home/home.module#HomePageModule'
}
]
},
{
path: 'my-requests',
children: [
{
path: '',
loadChildren: '../my-requests/my-requests.module#MyRequestPageModule'
}
]
},
{
path: 'add-request',
children: [
{
path: '',
loadChildren: '../add-request/add-request.module#AddRequestPageModule'
}
]
},
{
path: 'search',
children: [
{
path: '',
loadChildren: '../search/search.module#SearchPageModule'
}
]
},
{
path: 'profile',
children: [
{
path: '',
loadChildren: '../profile/profile.module#ProfilePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
];
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
sign-in.module.ts:
....
const routes: Routes = [
{
path: "",
component: SignInPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SignInPage]
})
....
sign-in.page.html:
<ion-button (click)="navigateToProfile()">Sign In</ion-button>
sign-in.page.ts:
navigateToProfile(){
this.navController.navigateRoot(`app/tabs/home`);
}
Overall, my solution was:
adding one more path: 'app' in my root module app-routing.module
navigating to root with route with NavController. See here for more details, I found it here.