具有固定参数的 Vue-router 别名

Question

我这里有这个小路由器，基本上我想为我的站点设置默认语言。这意味着如果您访问 www.example.com/about 和 www.example.com/es/about

应该看到相同的内容

我认为别名适合此操作，但是在尝试访问 /about 时出现错误。

[vue-router] missing param for aliased route with path "/:language/about": Expected "language" to be defined

这是有道理的，因为没有设置 :language 参数，有什么方法可以实现我想要的吗？我可以在用户点击别名时设置一个固定的 :language 参数吗？

这是我的路由器。

router = new Router({
  routes: [
    {
      path: '/:language/about',
      alias: '/about'
      component: About
    }
  ]
})

Answer 1

路由配置将任意语言设置为默认语言，如果 url 中提供了 none:

var routes = [
{
    path: '/:lang',
    component: WelcomeComponent,
    children: [
    {
        path: 'hello/:name',
        component: HelloComponent
    }
    ]
},
path: '*',
redirect: '/en'
]

如果用户直接访问 /:lang

，则在每个路由后设置来自 url 的语言

router.afterEach((to, from) => {
    Vue.config.lang = to.params.lang
}

我是从我经常参考的论坛 post 中提取的。它还包括语言切换器组件的一些逻辑：https://forum.vuejs.org/t/dynamic-base-in-vue-router/1026/4

Answer 2

使用可选参数（附加？）将解决这个问题。您甚至不需要别名：

router = new Router({
  routes: [
    {
      path: '/:language?/about',
      component: About
    }
  ]
})

具有固定参数的 Vue-router 别名

Vue-router alias with fixed param

vue-router

vuejs2