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

我试着跟着导游走 ，这将导致

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教程？

您似乎遇到了初学者的问题。在

main view.ts

中，它会在路线上循环一个标题，并尝试在菜单中为每个路线创建链接：

${this.getMenuRoutes().map(
  (viewRoute) => html`
    <vaadin-tab>
      <a href="${router.urlForPath(viewRoute.path)}" tabindex="-1">${viewRoute.title}</a>
    </vaadin-tab>
  `
)}

---

问题在于starter项目中的

main view.ts

具有尝试列出所有导航路线以为其生成链接的逻辑。目前该逻辑不够智能，无法检测和跳过具有非可选路线参数的路线

当

路径

具有非可选路由参数时，会从

路由器.urlForPath（viewRoute.path）

引发错误，因为此处我们没有指定路由参数的值（对于生成的URL）。要为路径

'item/:item'

生成URL，需要执行类似于

router.urlForPath（'item/:item'，{item:'my item'}）

的操作

Marcus建议的快速修复（从路由定义中删除

标题

）有效，因为

主视图.ts

具有跳过所有没有

标题

的路由的逻辑。您可以更改该逻辑，也可以根据某些其他条件跳过，或者尝试在其中包含路由参数的值（对于特定路线）如果确实要为这些路线生成工作导航链接

另一种选择是，通过在路由参数后添加问号，将路由参数标记为可选（如果您希望在没有参数的情况下也可以访问路由），然后可以生成链接，而无需为参数指定值

{
  path: 'item/:item',
  component: 'item-view' 
  // make sure there is no title here
}

{
  path: 'item/:item?', // <- optional route parameter
  component: 'item-view',
  title: 'Hello World',
}

{
路径：'item/：item？'//