vue.js - VueJS + vue-i18n 路由

Question

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

我要实现的目标:

网址结构:

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 组件根本不加载。

路由器.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,
        }
      ],
    },
  ],
})