时间戳

首页 > 解决方案 > Vaadin 路由器：将参数路由到地址栏不起作用

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

问题描述

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

索引.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.

标签： javascriptroutesvaadinweb-componentnative-web-component

解决方案

这似乎类似于此处描述的问题Unexpected token < error in react router component (Not a vaadin related)。

一个解决方案是将 a 添加<base href="/">到您的index.html文件中。Vaadin 路由器的教程中使用了相同的方法:)

推荐阅读