How to use VueJS router properly?

Question

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?

try doing this `:to="{ name: 'Recruit', params: { locale: ''}}"` — Amaarockz, Aug 10 '22 at 04:10
I tried however when I click go to the recruit page it's still just a blank url instead of /recruit — BinChanhKun, Aug 10 '22 at 04:27
It doesn't give an error, it just doesn't go to the destination I want, when I switch the page it will still go to the Recruit page but on the URL bar there is no change. — BinChanhKun, Aug 10 '22 at 04:41
So now its going to that recruit page, but the url alone is not showing as expected! right?? — Amaarockz, Aug 10 '22 at 04:44
Yes, because this is a recruitment page, I need to get the page link to send it to the candidate but now it is not showing the link if the locale has nothing, and if the locale has a value like /en /fr, the link is still there. display. — BinChanhKun, Aug 10 '22 at 04:53
how about `details` page, is it showing up in the url even if you don't send the id? — Amaarockz, Aug 10 '22 at 04:57
Possible duplicate of https://stackoverflow.com/questions/47824660/optional-param-in-vuejs-router — Estus Flask, Aug 10 '22 at 06:36
ohhh thanks. it works fine with recruit page, but i have trouble with detail page, i set router link as: :to="{ name: 'Detail', params: { id: item.id } }" and stay router is path:'/detail/:id/:locale?', name: 'Detail', on the detail page it always gets blank value even though I changed the locale params before — BinChanhKun, Aug 10 '22 at 07:13

How to use VueJS router properly?

0 Answers0