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?
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 try to use to generate a dynamic nav list from my routes in my routes.js:
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', name: 'home', component: () => import('pages/Index.vue') },
{ path: '/users', name: 'users', component: () => import('pages/Users.vue') },
{ path: '/news', name: 'news', component: () => import('pages/News.vue') },
],
},
// Always leave this as last one,
// but you can also remove it
{
path: '*',
component: () => import('pages/Error404.vue'),
},
];
export default routes;
that's the part of my MainLayout for the navigation list:
<ul>
<li v-for="item in routes" :key="item">
<router-link :to="item.path">{{item.name}}</router-link>
</li>
</ul>
But I can't get a list and I'm getting no error, did I maybe use the global MainLayout.vue wrong here which contains my header and footer and other global stuff or how can I get all the paths from just one children?
I think you are looking for this:
computed: {
routeList() {
return this.$router.options.routes
}
}
Got it, I added all Layout Stuff into my App.vue and uses the routes like normal, why so complicated :)
const routes = [
{ path: '/', name: 'home', component: () => import('pages/Index.vue') },
{ path: '/users', name: 'users', component: () => import('pages/Users.vue') },
{ path: '/news', name: 'news', component: () => import('pages/News.vue') },
{ path: '*', component: () => import('pages/Error404.vue') },
];
export default routes;
and as nav links:
<router-link
v-for="route in $router.options.routes"
:key="route.path"
:to="route.path"
>{{ route.name }}</router-link
>
works as aspected.
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 my routes as define below:
const router = new Router({
base: '/',
mode: 'history',
routes: [
{
path: '/',
redirect: `${DEFAULT_LOCALE}`,
},
{
path: '/:locale?',
component: AppTemplate,
children: [
{
path: 'home',
name: 'home',
component: () => import('#/views/Home.vue'),
meta: {
title: 'Home',
}
}
{
path: 'about',
name: 'about',
component: () => import('#/views/About.vue'),
meta: {
title: 'About',
},
},
{
path: 'contact',
name: 'contact',
component: () => import('#/views/Contact.vue'),
meta: {
title: 'Contact',
},
},
{
path: '*',
redirect: { path: '/' },
},
],
},
{
path: '*',
redirect: { path: '/' },
},
],
});
export default router;
I use :locale for app translation. It is optional because empty locale is for default language. My problem here is even if locale is present, all the links to other pages are without the locale, if that makes sense. For eg, example.com/about is in Italian and example.com/en/about is in English. But which ever URL it is, the links present on the page always points to contact or home page as example.com/contact and example.com/home. Is there a way to fix this? Or is there an easier way to use app translation from URL. I am using vue-i18n for the translation. Thanks
For such configuration I think you have to pass param to make it work:
<router-link :to="{name: 'contact', params: {locale: $route.params.locale} }">
https://jsfiddle.net/3gx4hak5/
Also maybe router-link append attribute will do the trick for you: https://router.vuejs.org/api/#append
Setting append prop always appends the relative path to the current path. For example, assuming we are navigating from /a to a relative link b, without append we will end up at /b, but with append we will end up at /a/b.
<router-link :to="{ path: 'relative/path'}" append></router-link>