我有一条路线应支持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
时它没有显示设置组件。
所以无论哪种方式都不好,我该怎么解决?
答案 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'
。