0

我的路线定义如下：

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翻译。谢谢

4

1 回答 1

0

对于这样的配置，我认为您必须传递参数才能使其工作：

<router-link :to="{name: 'contact', params: {locale: $route.params.locale} }">

https://jsfiddle.net/3gx4hak5/

也可能 router-linkappend属性会为您解决问题：https ://router.vuejs.org/api/#append

设置appendprop 总是将相对路径附加到当前路径。例如，假设我们从/a一个相对链接导航b，没有附加我们将结束于/b，但有附加我们将结束于/a/b。

<router-link :to="{ path: 'relative/path'}" append></router-link>
于 2018-07-17T20:40:21.770 回答