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.
I have a problem with the nonworking redirect. I check is the user is logged in and the info is right, but when it comes to redirecting it does not redirect and just goes in this beforeEnter over and over again. Can somebody say what am I doing wrong?
I am presenting here my RouteConfig and the problem with the first beforeEnter.
export const routes: RouteConfig[] = [
{ path: '*', redirect: '/' },
{
path: '/',
component: router_view,
async beforeEnter(to, from, next) {
var hasPermission = await storage.get('state').user.tokens.access;
console.log(!!hasPermission)
if (!!hasPermission && from.fullPath.startsWith('/')) {
return next('profile');
} else {
return next()
}
},
children: [
{
name: 'landing',
meta: { requiresAuth: false },
path: '',
component: require('pages/index').default
},
{
meta: { requiresAuth: true },
path: 'seller',
component: require('pages/seller').default,
children: [
{
path: '',
name: 'profile',
redirect: 'profile'
},
{
path: 'account',
component: require('pages/seller/account').default
},
{
path: 'help/:url?',
component: require('pages/seller/help').default
},
{
path: 'profile',
component: require('pages/seller/profile').default
},
{
path: 'finances/:shop?',
name: 'finances',
props: route => ({
...route.query,
...route.params
}),
component: require('pages/seller/finances').default
},
{
path: 'shop',
component: require('pages/seller/shop').default,
children: [
{
path: '',
redirect: 'main'
},
{
path: 'main',
component: require('pages/seller/shop/main').default
},
// {
// path: 'rating',
// component: require('pages/seller/shop/rating').default
// },
{
path: 'design',
component: require('pages/seller/shop/design').default
},
]
},
{
path: 'invoices',
redirect: { name: 'invoices-send' },
component: require('pages/seller/invoices/index').default,
children: [
{
path: 'send',
name: 'invoices-send',
component: require('pages/seller/invoices/send').default,
},
{
path: 'return',
name: 'invoices-return',
component: require('pages/seller/invoices/return').default
},
{
path: 'create-send',
component: require('pages/seller/invoices/createInvoice').default,
},
{
path: 'create-return',
component: require('pages/seller/invoices/createInvoice').default,
},
]
},
{
path: 'products',
component: router_view,
children: [
{
path: '',
redirect: 'all'
},
{
path: 'new',
component: require('pages/seller/products/new').default,
children: [
{
path: '',
component: require('pages/seller/products/new/createproduct').default
},
]
},
{
path: 'id/:productid/edit',
component: require('pages/seller/products/new').default,
children: [
{
path: '',
name: 'edit-product',
props: route => ({ ...route.params, ...route.query }),
component: require('pages/seller/products/new/createproduct').default
},
{
path: 'sku',
name: 'edit-product-sku',
component: require('pages/seller/products/new/createsku').default,
},
]
},
{
path: 'invoices',
redirect: { name: 'invoices-send' }
},
{
path: 'id/:productid',
component: require('pages/seller/products/_productid').default,
children: [
{
path: 'main',
name: 'product-page-solo',
component: require('pages/seller/products/_productid/main').default
},
// {
// path: 'reviews',
// component: require('pages/seller/products/_productid/reviews').default
// },
// {
// path: 'statistics',
// component: require('pages/seller/products/_productid/statistics').default
// },
{
path: 'printlabels',
name: 'product-labels-solo',
component: require('pages/seller/products/_productid/printlabels').default
},
]
},
{
path: 'stickers',
name: 'products-stickers',
component: require('pages/seller/products/stickers').default,
},
{
path: ':table',
name: 'product-list',
component: require('pages/seller/products/index').default,
props: _ => ({
tabletype: _.params.table
}),
beforeEnter(to, from, next) {
if (to.params.table === 'invoices') {
return next({ name: 'invoices' });
} else {
next();
}
},
children: [
{
path: 'id/:productid',
component: require('pages/seller/products/_productid').default,
children: [
{
path: 'main',
name: 'product-page',
component: require('pages/seller/products/_productid/main').default
},
// {
// path: 'reviews',
// component: require('pages/seller/products/_productid/reviews').default
// },
// {
// path: 'statistics',
// component: require('pages/seller/products/_productid/statistics').default
// },
{
path: 'printlabels',
name: 'product-labels',
component: require('pages/seller/products/_productid/printlabels').default
},
]
},
]
}
]
}
]
},
{
meta: { requiresAuth: false },
name: 'signin',
path: '/signin',
component: router_view,
children: [
{
path: '',
name: 'signin',
component: require('pages/signin/index').default
},
{
path: 'restore',
component: router_view,
children: [
{
path: '',
component: require('pages/signin/restore/index').default
},
{
path: 'password',
component: require('pages/signin/restore/newpassword').default,
beforeEnter(to, from, next) {
if (from.fullPath.startsWith('/confirm'))
return next();
else
return next('/');
}
}
]
}
]
},
{
path: 'confirm',
meta: { requiresAuth: false },
component: require('pages/confirm/index').default,
beforeEnter(to, from, next) {
const path = from.fullPath ? from.fullPath : from.path;
if (path === '/signin' || path === '/signup' || path === '/signin/' || path === '/signup/' || path === '/' || path === '/signin/restore' || path === '/signin/restore/'
|| (from.path.startsWith('/confirm') && from.query === to.query)
|| to.query.from === 'account'|| to.query.from === 'restore')
return next();
else
return next('/');
}
},
{
name: 'signup',
path: 'signup',
meta: { requiresAuth: false },
component: router_view,
children: [
{
path: '',
name: 'signup',
component: require('pages/signup/index').default
},
{
path: 'social',
component: require('pages/signup/social').default
},
]
},
{
meta: { requiresAuth: false },
path: 'terms-of-use',
component: require('pages/terms-of-use').default
}
]
}
];
I have an Angular 8 App that has lazyloading working on all the pages, except for 2 that have dynamic parameters where something is not working correctly
From the app routing module
{
path: 'product',
loadChildren: './marketing/page/product/product-page.module#ProductPageModule'
},
From the ProductPageRoutingModule
const routes: Routes = [
{
path: '',
component: AppMarketingPageProductComponent,
children: [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
]
}
];
Routes are being put into the imports correctly, and the ProductRoutingModule is imported into ProductPageModule.
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class ProductRoutingModule {}
In the AppMarketingPageProductComponent constructor
constructor( private route: ActivatedRoute ) {}
With these 2 I try to get the params within onNgInit function
this.route.params.subscribe( (params: Params) => {
console.log(params);
});
When I try to load the page I get an empty object. instead of "slug" or "slug" and "secondary" values key-value pairs.
The problem is that what I thought were child routes aren't really child routes so this
const routes: Routes = [
{
path: '',
component: AppMarketingPageProductComponent,
children: [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
]
}
];
needed to be changed to this
const routes: Routes = [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
];
now it works.
Implementing language switcher and have this last (hope so) missing puzzle.
I have these routes defined:
routes: [
{
path: '/',
redirect: `/en`,
},
{
path: '/:lang',
component: {
render: h => h('router-view')
},
children: [
{
path: '',
name: 'home',
component: Home,
},
],
},
],
And I have some routes coming from backend, I adding these routes to existing like this:
fetchRoutes({commit}) {
axios.get( `${process.env.VUE_APP_API_DOMAIN}/wp-json/api/v1/routes/`).then( r => r.data ).then(routes => {
routes.forEach( (route) => {
router.addRoutes([
{
path: `${route.path}`,
name: `${route.path}`,
component: () => import(/* webpackChunkName: 'pages' */ `./views/${route.component}.vue`),
props: route.props,
},
]);
} );
});
},
This is fine for non-children routes. But I need to put these routes under path: '/:lang', as children.