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'),
},
]
},
Related
I'm doing multilingual functionality based on locale params and this is the route I've configured:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/:locale',
name: 'Home',
component: Home
},
{
path: '/about:locale',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/recruit/:locale',
name: 'Recruit',
component: () => import(/* webpackChunkName: "Recruit" */ '../views/Recruit/index.vue'),
},
{
path: '/detail/:id/:locale',
name: 'Detail',
// props: (route) => ({ id: route.params.id }),
component: () => import(/* webpackChunkName: "Detail" */ '../views/Recruit/Detail.vue'),
},
]
And it throws an error that if when on home page and params locale is empty valid(/) instead of /en or /fr,... then when I redirect to another page the URL bar is completely blank and there is no any path.
This is my redirected router-link:
<router-link
class="nav-link rttr"
:to="{ name: 'Recruit'}"
>
Recruit
</router-link>
So is there a way when I redirect and the router params has no value (/) the path in the URL bar will still display correctly or not?
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.
In deep routing pattern nested route changing without a problem, but when I go to parent and come back to the nested child via redirect from the parent. The redirect is not applied smoothly. Path is changing clearly, but page is still displays the last visited nested route. And when I check the vue devtool. I see that redirected route being inactive but last visited is being active.
export default [
{
path: '/1/',
name: 'sumaipad',
component: () => import(/* webpackChunkName: "group-sumaipad" */ './views/index.vue'),
redirect:"/1/slideshow",
children: [
{
path:"/1/vista",
name: "vista",
meta: {
order: 1
},
component: () => import(/* webpackChunkName: "group-sumaipad" */ './views/vista.vue'),
},
{
path: '/1/plans',
name: 'plans',
component: () => import(/* webpackChunkName: "group-sumaipad" */ './views/plans.vue'),
redirect:{name:"rooms"},
meta:{
order: 2,
},
children:[
{
path: 'rooms',
name: 'rooms',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/rooms.vue'),
children:[
{
path: ':id',
name: 'room',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/room.vue'),
}
]
},
{
path: 'land',
name: 'land',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/land.vue'),
},
{
path: 'floor',
name: 'floor',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/floor.vue'),
},
]
},
]
}
]
For example when I go to plans it redirected to the rooms without a problem and after that I visit it's sibling which is land route and I turn back to parent level's route vista again.
THEN if go the plans I would expect to redirect me to rooms AND its actually is redirect me. The path is changing but content is being land in nested level. Because I visited it lastly. So even if its redirecting me to rooms, the rooms route is being inactive in vue devtools.
Is there a way to change the active and inactive route about last visited after the redirect?
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.