从vue2中的别名获取URL的id

时间:2018-03-21 14:58:33

标签: vue.js vuejs2 vue-router

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

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

当我访问网址localhost:8080/settingslocalhost: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时它没有显示设置组件。

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

2 个答案:

答案 0 :(得分:2)

试试这个:

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

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

答案 1 :(得分: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

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