Question

我有一条路线应支持2个不同的网址 - /settings/:code和/settings：

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

当我访问网址localhost:8080/settings和localhost:8080/settings/123时，它正在我的SPA中正常运行，因为它正在点击设置组件。

我怎么试着这样:code：

resetCode: this.$route.params.code,

来自网址的

即使我在localhost:8080/settings/123上，也始终未定义。

当我转向别名和路径时，反过来就是这样：

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

然后我的：代码是正确的，我的意思是当我转到网址localhost:8080/settings/123时它是123，但在这种情况下，当我转到网址localhost:8080/settings时它没有显示设置组件。

所以无论哪种方式都不好，我该怎么解决？

Answer 1

试试这个：

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

它未经测试，但我认为因为您的别名和路径匹配问题发生的相同路径。这就是我建议用儿童路线尝试的原因。

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

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

从vue2中的别名获取URL的id

2 个答案: