首页 文章

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

提问于
浏览 次
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 进行翻译 . 谢谢

vuejs2 vue-router vue-i18n

1 回答

  • 0

    对于这样的配置，我认为你必须通过param才能使它工作：

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

    https://jsfiddle.net/3gx4hak5/

    也许router-link append 属性可以帮到你：https://router.vuejs.org/api/#append

    设置追加支柱总是将相对路径附加到当前路径 . 例如，假设我们从/ a导航到相对链接b，没有附加，我们将以/ b结束，但是有了追加，我们将以/ a / b结束 .

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

相关问题