Vuejs2 页面上带有可选动态路由的链接在vuejs中始终不带参数

我的路线定义如下：

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;

---

我使用

：locale

进行应用程序翻译。它是可选的，因为空区域设置是默认语言。我这里的问题是，即使存在区域设置，所有指向其他页面的链接都没有区域设置，如果这有意义的话。例如，example.com/about是意大利语，example.com/en/about是英语。但无论是哪个URL，页面上的链接总是指向联系人或主页，例如example.com/contact和example.com/home。有办法解决这个问题吗？或者有没有一种更简单的方法可以从URL使用应用程序翻译。我正在使用

vue-i18n

进行翻译。感谢您提供这种配置，我认为您必须通过param才能使其正常工作：

另外，路由器链接

append

属性也可能会为您带来好处：

设置

append

prop总是将相对路径追加到当前路径。例如，假设我们从

/a

导航到相对链接

b

，如果没有append，我们将在

/b

结束，但是使用append，我们将在

/a/b

结束

---

我正在使用第二个：

。当需要动态路由

：locale

时，此选项有效。如果是可选的，即使url是

localhost:8080/en/about

，链接也是

localhost:8080/contact

。

<router-link :to="{ path: 'relative/path'}" append></router-link>