从 vue2 中别名上的 URL 获取 ID

Question

我有一个路由应该支持 2 个不同的 URL - /settings/:code 和 /settings ：

{
    path: '/settings',
    alias: '/settings/:code',
    name: 'settings',
    component: settings
},

当我转到 URL localhost:8080/settings 并以两种方式localhost:8080/settings/123它点击设置组件时，它在我的 SPA 中正常工作。

当我尝试像这样:code时：

resetCode: this.$route.params.code,

从 url 中，即使我在 localhost:8080/settings/123 上，它也总是未定义的。

当我将别名和路径转向相反的方式时，它是：

{
    alias: '/settings',
    path: '/settings/:code',
    name: 'settings',
    component: settings
},

那么我的 ：code 是正确的，我的意思是当我转到 URL 时它是 123 localhost:8080/settings/123但在这种情况下，当我转到 url localhost:8080/settings 时它不显示设置组件。

所以无论哪种方式都是不好的，我该如何解决？

Answer 1

这不是

alias的工作方式。您可以使用不同的名称指定 url 别名，但不能使用 url 参数指定。

path: '/settings'
alias: '/settings/:code' // incorrect
alias: '/settingsAlias' // correct (different path name)
path: '/settings/:code'
alias: '/settings' // incorrect ( param is missing )
alias: '/settingsAlias/:code' // correct
alias: '/settingsAlias/:codeAlias // correct

此外，@Thomas Kleßen答案似乎对您来说效果很好。但这不是创建子路由的原因。

path: '/settings',
component: settings,
children: [
  {
    path: ':code' // ( incorrect usage ) how is this children?
  }
]

子路由后面应遵循斜杠/(不仅是/:param，还有/pathname(。如果您使用前面的示例，那么您只是在对路由器进行技巧。

那么，正确的使用方法是什么？

好吧，您可以定义一个可选的参数：

path: '/settings/:code?' // using ? defines param as optional

因此，现在您可以在 url 中点击'/settings'或'/settings/123'。

Answer 2

试试这个：

{
    name: 'settings',
    path: '/settings',
    component: settings,
    children: [
      {
        name: 'settings_code',
        path: ':code',
        component: settings
      }
    ]
}

它是未经测试的，但我认为因为您的别名和路径与出现问题的路径匹配。这就是为什么我建议尝试使用儿童路线。