I have a parent component with several children:
// more routes here
{
path: '/organisatie',
name: 'Organisation',
meta: { breadCrumb: 'Organisatie' },
component: () => import(/* webpackChunkName: "organisations" */ '../views/Organisation.vue'),
},
{
path: '/personen',
component: () => import(/* webpackChunkName: "people" */ '../views/People.vue'),
children: [
{
path: '/',
name: 'People',
component: () => import(/* webpackChunkName: "listpeople" */ '../views/ListPeople.vue'),
meta: { breadCrumb: 'Personen' },
},
{
path: '/personen/:id',
name: 'Person',
component: () => import(/* webpackChunkName: "person" */ '../views/Person.vue'),
meta: { breadCrumb: 'Persoon' },
children: [
{
path: '/personen/:id/edit',
name: 'Edit-user',
component: () => import(/* webpackChunkName: "editperson" */ '../views/EditPerson.vue'),
meta: { breadCrumb: 'Bewerken' },
},
],
},
],
},
I can navigate to mywebsite.com/personen/id. But if I go to another page via a router-link, say 'organisatie', the URL becomes mywebsite.com/personen/organisatie instead of mywebsite.com/organisatie.
How do I prevent this from happening?
Edit: I'm using a custom component from Vue Language Router which I dynamically add my links to: <localized-link to="item.link"></localized-link>
items: [
{ link: 'organisatie'},
]
I think it's not a good idea to repeat parent path in a child path.
Here is an example for nested routes;
https://router.vuejs.org/guide/essentials/nested-routes.html
Can you try the code below? Of course you should fix router-links aswell.
// more routes here
{
path: '/organisatie',
name: 'Organisation',
meta: { breadCrumb: 'Organisatie' },
component: () => import(/* webpackChunkName: "organisations" */ '../views/Organisation.vue'),
},
{
path: '/personen',
component: () => import(/* webpackChunkName: "people" */ '../views/People.vue'),
children: [
{
path: '/',
name: 'People',
component: () => import(/* webpackChunkName: "listpeople" */ '../views/ListPeople.vue'),
meta: { breadCrumb: 'Personen' },
},
{
path: '/:id',
name: 'Person',
component: () => import(/* webpackChunkName: "person" */ '../views/Person.vue'),
meta: { breadCrumb: 'Persoon' },
children: [
{
path: '/:id/edit',
name: 'Edit-user',
component: () => import(/* webpackChunkName: "editperson" */ '../views/EditPerson.vue'),
meta: { breadCrumb: 'Bewerken' },
},
],
},
],
},
Related
I have a nested route like this:
{
path: '/product/:language',
name: 'LandingHome',
component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Base.vue'),
props:true,
children: [
{
path: '',
name: 'LandingHome',
component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Home.vue'),
},
{
path: 'customers',
name: 'LandingCustomers',
component: () => import(/* webpackChunkName: "LandingCustomers" */ '../views/landings/Customers.vue'),
},
]
},
How can i push route to named route "LandingCustomers" but also passing "LandingHome" :language param ?
this.$router.push({name: "LandingCustomers", params: { language: locale })
As expected language params is passed to child route, but how can push to child and also passing params language to parent on the same time?
Thanks and have a nice day!
add the language in children routes
{
path: '/product',
name: 'LandingHome',
component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Base.vue'),
props:true,
children: [
{
path: ':language',
name: 'LandingHome',
component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Home.vue'),
},
{
path: ':language/customers',
name: 'LandingCustomers',
component: () => import(/* webpackChunkName: "LandingCustomers" */ '../views/landings/Customers.vue'),
},
]
},
First, sorry for my bad english.
I'm learning about modular architecture / Folder By Feature in vue just like this
enter image description here
In user module I created a router like this
enter image description here
And add user's router to main router like this
enter image description here
Builder router is my apps routing after user logged in. And my main router is like this
enter image description here
What's happening is everything works fine when I access /dashboard or /about or other page that defined main router. And I click the /user router (it cames from user's module router) and it also work fine. But when I access /dashboard again. the router view show nothing (it is <!-- --> in dev console).
It's OK when access dashboard. Page displayed (white boxes)
enter image description here
Also OK in user module router
enter image description here
It became blank when I access /dashboard again
enter image description here
The structure of router-view
<router-view> Page Loader
<router-view> Module Loader (Index, Add, Edit)
This is my main router
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Builder',
component: Builder,
meta: {
requiresAuth: true
},
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
meta: {
pageTitle: 'Dashboard',
requiresAuth: true
},
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
},
{
path: 'about',
name: 'About',
meta: {
pageTitle: 'About',
requiresAuth: true,
breadcrumb: [
{
label: 'About',
to: '/about'
}
]
},
component: () => import(/* webpackChunkName: "about" */ '#/views/About.vue')
},
]
};
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Registering Route
import router from '../router/index'
import store from '../store/index'
const registerModule = (name, module: any) => {
if (module.store) {
store.registerModule(name, module.store)
}
if (module.router) {
module.router.forEach(item => {
router.addRoute('Builder', item)
})
}
}
export const registerModules = (modules: any) => {
Object.keys(modules).forEach(moduleKey => {
const module = modules[moduleKey]
registerModule(moduleKey, module)
})
}
User Module Route
const moduleRoute = [{
path: '/user',
name: 'User',
component: () => import(/* webpackChunkName: "user" */ '../user/Module.vue'),
meta: {
pageTitle: 'User Management Builder',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
children: [
{
path: 'list',
name: 'UserList',
meta: {
pageTitle: 'User Management',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
component: () => import(/* webpackChunkName: "user" */ '../user/views/Index.vue')
},
{
path: 'add',
name: 'UserAdd',
meta: {
pageTitle: 'User Add',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
component: () => import(/* webpackChunkName: "user" */ '#/modules/user/views/Add.vue')
}
]
}]
export default moduleRoute
Extra Note:
I'm using webpack too in case it it affects my problem
Any help please. Thank you in advance.
I am using webpackChunkName to give names to the build files (chunks). I same two global routes (path: /) and different child routes of each.
After the build, I see can some of the chunks have a tilde sign in them and I haven’t added that. For example
dist/js/AccountManagement~Login~Register.dec3aad2.js
The AccountManagement is in a separate child route and log in and Register are different routes of the same parent route.
Here is my trimmed vue route file
const routes = [
{
path: "/",
component: () => import("#layouts/dashboard.vue"),
children: [
{
path: "/account/:page",
name: "Account",
meta: {
requiresAuth: true,
title: "My Account",
},
component: () => import(/* webpackChunkName: "AccountManagement" */ "#page/profile/MyAccount.vue"),
},
],
},
{
path: "/",
component: () => import("#layouts/headers.vue"),
children: [
{
path: "/login",
name: "Login",
meta: {
requiresAuth: false,
title: "Login - Inline Checkout",
},
component: () => import(/* webpackChunkName: "Login" */ "#page/authentication/Login.vue"),
},
{
path: "/reset-password",
name: "ForgotPassword",
meta: {
requiresAuth: false,
title: "Password Reset - Inline Checkout",
},
component: () => import(/* webpackChunkName: "ForgotPassword" */ "#page/authentication/ForgotPassword.vue"),
},
{
path: "/register",
name: "Register",
meta: {
requiresAuth: false,
title: "Register - Inline Checkout",
},
component: () => import(/* webpackChunkName: "Register" */ "#page/authentication/Register.vue"),
},
],
},
];
All I need is to remove this Tilde sign and unwanted name, in this case, ~Login~Register.
I am not sure how to show 404 page if parameter not matching? For example, if user name is “joe”, and if someone open “/joe/categories”, categories component should be shown.
Now I want to add guard if someone try to open for example “/james/categories”, in this case I want to do redirection to show 404 component. I am not sure what should I fix? I got error "Unexpected error when starting the router: Error: Missing required param 'catchAll'"
const routes = [
{
path: '/:userName/categories',
name: 'Categories',
component: () => import(/* webpackChunkName: "home" */'#/views/Categories'),
props: true
},
{
path: '/:userName/products',
name: 'Products',
component: () => import(/* webpackChunkName: "home" */'#/views/Products'),
props: true
},
{
path: '/:userName/settings',
name: 'Settings',
component: () => import(/* webpackChunkName: "home" */'#/views/Settings'),
props: true
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */'#/views/Login')
},
{
path: '/registration',
name: 'Registration',
component: () => import(/* webpackChunkName: "registration" */'#/views/Registration')
},
{
path: '/:catchAll(.*)',
name: '404',
component: () => import(/* webpackChunkName: "404" */'#/views/404')
}
]
router.beforeEach((to, from, next) => {
const isAuthenticated = store.getters[‘users/isAuthenticated’]
if (!isAuthenticated && to.name !== ‘Login’ && to.name !== ‘Registration’ && to.name !== ‘404’) {
next({
name: ‘Login’
})
} else if (isAuthenticated && store.getters[‘users/getUserName’] !== to.params.userName) {
next({
name: ‘404’
})
} else {
next()
}
})
I think you can do this:
const routes = [
{
path: '/:userName/categories',
name: 'Categories',
component: () => import(/* webpackChunkName: "home" */'#/views/Categories'),
props: true
},
{
path: '/:userName/products',
name: 'Products',
component: () => import(/* webpackChunkName: "home" */'#/views/Products'),
props: true
},
{
path: '/:userName/settings',
name: 'Settings',
component: () => import(/* webpackChunkName: "home" */'#/views/Settings'),
props: true
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */'#/views/Login')
},
{
path: '/registration',
name: 'Registration',
component: () => import(/* webpackChunkName: "registration" */'#/views/Registration')
},
{
path: '*',
name: '404',
component: () => import(/* webpackChunkName: "404" */'#/views/404')
}
]
router.beforeEach((to, from, next) => {
const isAuthenticated = store.getters[‘users/isAuthenticated’]
if (!isAuthenticated && to.name !== ‘Login’ && to.name !== ‘Registration’ && to.name !== ‘404’) {
next({
name: ‘Login’
})
} else if (isAuthenticated && store.getters[‘users/getUserName’] !== to.params.userName) {
next({
name: ‘404’
})
} else {
next()
}
})
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.