vaadin - 如何在 Vaadin Fusion 中使用带有路由器的 URL 参数？

Question

我试着按照指南 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 上的待办事项教程？

Answer 1

问题在于起始项目中的 main-view.ts 具有尝试列出所有导航路线以为其生成链接的逻辑。目前，该逻辑不够智能，无法检测和跳过具有非可选路由参数的路由。

当 path 具有非可选路由参数时，从 router.urlForPath(viewRoute.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',
}