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.
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.
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 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' },
},
],
},
],
},
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.