1

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

无法获取 /users

我已经查看了这个问题，但似乎没有帮助：Vaadin Router: Route Parameters into the address bar not working

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

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

包.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'},
]);

索引.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。但是，它们存在于代码中，单击链接可以成功导航到它们。

4

1 回答 1

2

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

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

否则，当您输入/usersURL 时，您的浏览器会离开当前页面并将请求发送到后端，后端没有任何页面可以使用该路径返回

于 2021-07-15T07:36:40.267 回答