VueJS + vue-i18n路由

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();
});

这是我不明白的部分，为什么它不能工作，为什么，为什么家庭组件没有加载在所有的。

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,
        }
      ],
    },
  ],
})