Question

我的路线如下：

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

Answer 1

对于这种配置，我认为您必须传递参数才能使其生效：

locale

https://jsfiddle.net/3gx4hak5/

也许router-link <router-link :to="{name: 'contact', params: {locale: $route.params.locale} }">属性将为您解决问题：https://router.vuejs.org/api/#append

设置append属性总是将相对路径附加到当前路径。例如，假设我们从append导航到相对链接/a，没有附加，我们将以b结尾，但是有了附加，我们将以/b结尾。

/a/b

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

1 个答案: