2

我尝试按照 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 进行操作？

4

2 回答 2

3

看来你遇到了启动器的问题。在main-view.ts中，它会遍历带有标题的路由，并尝试为菜单中的每个路由创建一个链接：

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

但是，router.urlForPath()当存在 URL 参数定义而不是实际参数（items/:item而不是items/2）时会中断。

对此的快速解决方法是title从您的路由配置中删除任何具有参数的路由的属性。

{
  path: 'item/:item',
  component: 'item-view' 
  // make sure there is no title here
}
于 2021-06-02T20:11:13.377 回答
3

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

router.urlForPath(viewRoute.path)当path具有非可选路由参数时会引发错误，因为这里我们没有指定路由参数的值应该是什么（对于生成的 URL）。要为路径生成 URL，'item/:item'它需要执行类似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',
}
于 2021-06-03T12:01:56.473 回答