如何解决如何在 Vaadin Fusion 中通过路由器使用 URL 参数?
我尝试按照指南进行操作 Question,结果是
mobx.esm.js?4fd9:2362 [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component,in: 'Reaction[MainView.update()]' TypeError: Expected "item" to be a string
我的配置是
path: 'item/:item',component: 'item-view',
有没有例子,如何解决这个问题?我是否需要在 MainView 中处理这个问题(我遵循 vaadin.com 上的 todo-tutorial?
解决方法
您似乎遇到了启动器的问题。在 main-view.ts
中,它遍历带有标题的路由,并尝试为菜单中的每个路由创建一个链接:
${this.getMenuRoutes().map(
(viewRoute) => html`
<vaadin-tab>
<a href="${router.urlForPath(viewRoute.path)}" tabindex="-1">${viewRoute.title}</a>
</vaadin-tab>
`
)}
但是,当存在 URL 参数定义而不是实际参数(router.urlForPath()
而不是 items/:item
)时,items/2
会中断。
对此的快速解决方法是从具有参数的任何路由的路由配置中删除 title
属性。
{
path: 'item/:item',component: 'item-view'
// make sure there is no title here
}
,
问题在于起始项目中的 main-view.ts
具有尝试列出所有导航路线以为其生成链接的逻辑。目前,该逻辑不够智能,无法检测和跳过具有非可选路由参数的路由。
当 router.urlForPath(viewRoute.path)
具有非可选路由参数时,错误是从 path
抛出的,因为这里我们没有指定路由参数的值应该是什么(对于生成的 URL)。要为路径 'item/:item'
生成 URL,它需要执行类似 router.urlForPath('item/:item',{ item: 'my-item' })
的操作。
Marcus 建议的快速修复(从路由定义中删除 title
)有效,因为 main-view.ts
具有跳过所有没有 title
的路由的逻辑。您可以更改该逻辑以也跳过其他一些标准,或者如果您真的想为这些路线生成工作导航链接,您可以尝试在其中包含路线参数的值(针对特定路线)。
其他替代方法是通过在路由参数后面添加一个问号将路由参数标记为可选(如果您希望路由也可以在没有参数的情况下访问),则可以在不指定参数值的情况下生成链接.
{
path: 'item/:item?',// <- optional route parameter
component: 'item-view',title: 'Hello World',}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。