Question

无法弄清楚如何设置路由以及为什么当前配置不起作用。

我要完成的工作：

URL结构：

http://example.com/en
http://example.com/en/about-us
http://example.com/en/sample-page

http://example.com/fr
http://example.com/fr/about-us
http://example.com/fr/sample-page

为处理正确的重定向，我在beforeEach之前设置了

router.beforeEach((to, from, next) => {
  const lang = to.params.lang;

  if ( !['en','fr'].includes(lang) ) {
    return next('en');
  }

  if ( i18n.locale !== lang ) {
    i18n.locale = lang;
  }

  return next();
});

这是我不了解的部分，为什么它不起作用，为什么Home组件根本无法加载。

router.js

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/:lang',
      children: [
        {
          path: '',
          name: 'home',
          component: Home,
        }
      ],
    },
  ],
})

语言（语言环境）切换正常。

Answer 1

您需要一个组件来渲染路线/:lang。您可以创建一个文件并在其中添加<router-view/>或创建一些匿名组件，例如：

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/:lang',
      component: {
        render: h => h('router-view')
      },
      children: [
        {
          path: '',
          name: 'home',
          component: Home,
        }
      ],
    },
  ],
})

VueJS + Vue-i18n路由

1 个答案: