I am trying something like this
{
path: "/portfolio",
component: () =>
import("../common/components/Layout/Layout/Profile/ProfileLayout"),
meta: { requiresAuth: false },
children: [
{
path: "/:username",
component: () =>
import(/*webpackChunkName: "profile"*/ "../modules/Profile/Profile"),
},
],
},
But the piece of code is not working while routes without child routes working perfectly
{
path: "/profile/:userName",
component: () => import("../modules/profile/UserProfile"),
}
how can i solve the first piece of code ?
You should remove the prepended slash from the child route path :
path: ":username",
or try out :
path: "user/:username",
then you could visit the url like /portfolio/user/john
Related
I am currently struggeling with adding multiple Child routes to my tab in an App using Ionic with Vue.js
This works totally fine:
{
path: 'tab3',
component: () => import('#/views/Tab3.vue')
},
{
path: 'tab3/tab_new_sl',
name: 'tab_new_sl',
component: () => import('#/views/Tab_new_SL.vue')
},
But as soon as I add another child route, the app crashes:
{
path: 'tab3',
component: () => import('#/views/Tab3.vue')
},
{
path: 'tab3/tab_new_sl',
name: 'tab_new_sl',
component: () => import('#/views/Tab_new_SL.vue')
},
{
path: 'tab3/tab_show_list',
name: 'tab_show_list',
component: () => import('#/views/Tab_Show_list.vue')
}
Error:
TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
undefined
promiseReactionJob
27
Maybe one of you can tell me how I define multiple child routes
i think the other paths should be children
https://github.com/aaronksaunders/ionic-vue3-sample-2/blob/master/src/router/index.ts
{
path: 'tab3',
component: () => import('#/views/Tab3.vue')
children : [
{
path: 'tab3/tab_new_sl',
name: 'tab_new_sl',
component: () => import('#/views/Tab_new_SL.vue')
},
{
path: 'tab3/tab_show_list',
name: 'tab_show_list',
component: () => import('#/views/Tab_Show_list.vue')
}
]
}
I'm developing an app with Quasar, it compiles to Cordova app so I can run it on my phone. The weird thing is that I have that error only on my phone, without errors in console and only on the first load when app was installed.
I have a simple query
apollo: {
receipts: {
query: GET_RECEIPTS,
loadingKey: "loading",
},
},
and my component data is:
loading = 0;
#Watch("loading")
emitLoading(val) {
this.$apollo.mutate({
mutation: UPDATE_LOADING,
variables: { loading: !!val }
});
}
But the thing is when query cannot fetch anything (no data in DB), I get infinite loading. Should I fix with apollo error hook? And if yes how do I access loading data for the hook?
The solution wasn't obvious at all. I needed to change my route path for that page (homeManagement). Previously I had:
path: "/",
component: () => import("layouts/main-layout.vue"),
meta: { requiresAuth: true },
children: [
{
path: "",
name: "homeManagement",
component: () => import("pages/home-management/index.vue")
}
And now I have:
path: "/",
component: () => import("layouts/main-layout.vue"),
meta: { requiresAuth: true },
children: [
{
path: "home",
name: "homeManagement",
component: () => import("pages/home-management/index.vue")
}
I didn't figured out why is that. And btw path: "/" for homeManagement also gives me that issue with loading.
How to use a guard to move to next rule of route instead of redirect to specific route?
for example, I have some routes:
routes: [
{ path: '/', component: Main },
{ path: '/about', component: About },
{ path: '/:product', component: Product },
{ path: '*', component: NotFoundException }
]
and in Product component I have beforeRouteEnter function like that:
beforeRouteEnter(to, from, next) {
const question = checkIfExist(to.params.product);
if (question) { next(); return;}
next();
}
if the product not exist then it should be redirect to NotFoundException component. in the stackoverflow example I see only example with redirect to specific url (like login) which is not helpful.
When I given url: '/some' then vue check if:
is / ? no => next route.
is /about ? no => next route.
is /:product ? no => next route.
display NotFoundException component.
You can reference the next route by route name.
First, name your exception route
routes: [
{ path: '/', component: Main },
{ path: '/about', component: About },
{ path: '/:product', component: Product },
{ path: '*', name: 'notFound', component: NotFoundException }
]
Then, create a variable which stores your beforeEnter Logic
const productExists = (to, from, next) => {
const question = checkIfExist(to.params.product);
if (question) { next(); return;}
next({
name: "notFound"
});
}
Add the route guard to the routes that you want to guard
routes: [
{ path: '/', component: Main },
{ path: '/about', component: About },
{ path: '/:product', component: Product, beforeEnter: productExists },
{ path: '*', name: 'notFound', component: NotFoundException }
]
I need few dynamic route in Vue router like
/payouts/:person
/payouts/:pay_id
I tried make some children routes but its not working, its work like this only with id but it not what i want
{
path: 'payouts',
name: 'Payouts',
meta: {
title: 'Payouts'
},
component: () => import('#/pages/Payouts'),
},
{
path: 'payouts/:pay_id',
name: 'Pay_id',
meta: {
title: 'Pay'
},
component: () => import('#/pages/Pay_id'),
},
For parameterised routes use
this.$router.push({name: 'payouts', params: { pay_id: "SomeID"}});
Or
this.$router.push({path: '/newLocation/SomeID'});
for non parameterised route
this.$router.push({path: '/newLocation'});
On my site I have a navigations with some categories and nested navigation anchors in them. How can I group this routes in vue-router? The best I've come up with is to place for each route a meta and then group by it.
I use like this (look that component: { render: h => h('router-view') }):
{
// =============================================================================
// MAIN LAYOUT ROUTES
// =============================================================================
path: '',
component: () => import('./layouts/main/Main.vue'),
children: [
// =============================================================================
// Routes
// =============================================================================
{
path: '/',
name: 'home',
component: () => import('./views/Dashboard.vue'),
},
// =============================================================================
// User Routes
// =============================================================================
{
path: '/user',
name: 'user',
component: { render: h => h('router-view') },
children: [
{
path: 'list',
name: 'user.list',
component: () => import('./views/pages/User/List.vue'),
},
]
},
],
}
There is forked and fixed example: https://jsfiddle.net/andrewright/wsmx92bg/
You should know, that children routers opens inside parent template. That means you need to add additional <router-view> inside parent template.
The idea is that: children routers change some block, like part of parent content. Good way to use it - for subcategory menu.
You can use nested routes. In your routes file you can do something similar.
{
path: '/category',
name: 'category',
component: Category,
children: [
{
path: 'subcategory',
name: 'subCategory',
component: ChildComponent,
},
// other nested routes
]
},