在 vue2 的别名上从 URL 获取 id

Question

我有一条路线应该支持 2 个不同的 URLs - /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 localhost:8080/settings/123 时它是 123 但在这种情况下，当我转到 url localhost:8080/settings。

所以这两种方法都不好，我该如何解决？

Answer 1

试试这个：

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

它未经测试，但我认为是因为您的别名和路径与出现问题的路径相同。这就是为什么我建议尝试使用 child-route.

Answer 2

这不是 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'。

在 vue2 的别名上从 URL 获取 id

Get id from URL on alias in vue2

vue.js

vue-router

vuejs2