Vaadin 路由器：将参数路由到地址栏不起作用

Question

我正在使用 Web Components 构建应用程序并使用 Vaadin Router 进行路由。我有以下项目结构：

index.html

<html>
  <head>
     <script type="module" src="app/app.module.js"></script>
  </head>
  <body>
     <mp-app-root></mp-app-root>
  </body>
</html>

app.module.js（vaadin 路由器）：

(...) multiple imports
import {Router} from '../vaadin-router.js'

// select the DOM node where the route web components are inserted
const outlet = document.querySelector('mp-app-root');

// create a router instance and set the routes config
const router = new Router(outlet);
router.setRoutes([
    {path: '/meals', component: 'mp-meal-module'},
    {path: '/meals/:id', component: 'mp-meal-detail-module'},
]);

到目前为止，vaadin router 显示了 mp-app-root 标签中的每个组件。

当我通过 <a>-Tags 调用 URL 时，路由工作正常。但是，如果我将 url 粘贴到地址栏或重新加载页面（例如 http://127.0.0.1:8081/meals/1），则组件不会加载，并且出现以下错误：

Uncaught SyntaxError: Unexpected token '<'`

和

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Answer 1

这似乎与此处描述的问题相似Unexpected token < error in react router component（与 vaadin 无关）。

一个解决方案是将 <base href="/"> 添加到您的 index.html 文件。在Vaadin Router:)

的教程中使用了相同的方法

Vaadin 路由器：将参数路由到地址栏不起作用

Vaadin Router: Route Parameters into the address bar not working

javascript

routes

vaadin

web-component

native-web-component