javascript - 无法使用pushstate和各种js路由器进行路由

Question

我不确定我是否很好地理解pushstate和路由的情况，但我一直在尝试使用pagejs或grapnel或其他类似的javascript路由器来路由单页应用程序。

我想要的是能够浏览我的程序和通过在地址栏中手动输入路线(这样我就可以将指向我的水疗中心各个部分的链接发送给第三方)。我无法手动导航到/test 路线，例如使用以下代码。

以下是 pagejs 的示例。

我还让我的 Nodejs 后端在收到/login 请求时重定向到/#login。

我如何利用pushstate，以便我可以在地址栏中输入手动地址并通过路由器和html链接进行导航？我在这里缺少什么？

一些示例代码:

page('/',index);
page('/signin',signin);
page('/test',test)
page();

function index() {
  console.log('in index')
  new WelcomeView();
  console.log('rerouting');
  page('/signin');
}

function signin() {
  console.log('in signin')
  //new SigninFormView();
}

function test() {
  console.log('in test');
}

在welcome.html

click <a href="/#test">lets see</a>

在app.js(服务器端)

//router redirect to webapp
app.use(function(req, res, next) {
  const redirectUrl=(req.secure ? 'https://' : 'http://') + req.headers.host +'/#'+req.originalUrl.substring(1);
  res.redirect(redirectUrl);
});

这会产生以下结果:

1) 导航到/我收到欢迎页面和控制台日志，表明它已导航到登录路线

2)在地址栏中手动写入链接/signin 我再次导航到重定向的/路由

3)在地址栏中手动写入链接/#signin 我再次导航到重定向的/路由

4)再次点击welcome.html中的链接会通过/路由重定向我

5) 单击welcome.html 中的链接并将其更改为/test works。

Answer 1

每当您(手动或以其他方式，通常通过设置window.location = 'myurl')更改地址栏中的任何内容时，浏览器总是会发出请求，据我所知，这是没有办法的如果有的话，这将是一个安全问题，因为页面可能会劫持您的浏览器，不允许导航到任何其他网址。如果您希望能够通过在地址栏中键入来加载 SPA 中的特定 URL，则需要服务器做出响应。在 SPA 中，您通常会返回加载 SPA 的相同 html。现在，似乎 pagejs 不尊重地址栏中的 url，并不断加载 / (我相信我以前见过)，作为解决方法，您可以尝试设置 page() 到 window.location.pathname 当您的应用加载时，看看这是否可以解决您的第二个问题。

此外，hashbang url 默认情况下不会在页面中启用，您需要使用 page({hashbang: true}) 启用它们。