Vaadin 路由器（非 java）地址栏条目不工作

Question

正在尝试使用 Vaadin 路由器和 Web 组件创建单页应用程序。一切都适用于正常导航。但是，当在地址栏中输入有效地址时，我会在屏幕上看到以下输出并且控制台中没有错误。

无法获取 /users

我已经查看了这个问题，但似乎没有帮助：

我认为我应该能够输入地址并导航到资源的想法是错误的吗？

教程中的典型设置：具有以下版本：

package.json

  "name": "rollup-dependencies",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.0.0",
    "rollup": "^2.52.8"
  },
  "dependencies": {
    "@vaadin/router": "^1.7.4",
    "lit-html": "^1.4.1",
    "redux": "^4.1.0"
  }
}

app.js - 路线


import "../views/HomeView.js";
import "../views/NotFoundView.js";
import "../views/UserListView.js";

// select the DOM node where the router inserts route Web Components
const outlet = document.getElementById('outlet');
const router = new Router(outlet);
router.setRoutes([
    {path: '/', component: 'x-home-view'},
    {path: '/users', component: 'x-users-view'},
    {path: '/users/(.*)', component: 'x-user-not-found-view'},
    {path: '(.*)', component: 'x-not-found-view'},
]);

index.html

<!DOCTYPE html>
<html>

<head>
    <title>[WebStandards template]</title>
    <link rel="stylesheet" href="./content/css/style.css">
</head>

<body>
    <base href="/">
    <a href="/">Home</a>
    <a href="/users">All Users</a>
    <a href="/users/kim">Kim</a>
    <a href="/about">About</a>
    <div id="outlet"></div>

    <script src="./content/scripts/app.js" type="module"></script>
</body>

</html>

为简洁起见，此处未显示 WebComponents。但是，它们存在于代码中，单击链接可以成功导航到它们。

Answer 1

您需要在后端服务器中处理这些路径，以便它们 return 与路径为“/”时 return 编辑的内容相同 index.html。

认为 vaadin-router 在客户端工作，通过使用 javascript API 它用 web-component 替换内容并更新 url，但它没有将请求 /users 发送到服务器。

否则，当您在 URL 中键入 /users 时，您的浏览器会离开当前页面并将请求发送到后端，后端没有任何页面指向 return 的路径

Vaadin 路由器（非 java）地址栏条目不工作

Vaadin Router (non-java) Address Bar Entry not working

javascript

vaadin

web-component

browser-sync

vaadin-router