无法使用pushstate和各种js路由器执行路由

Question

我不确定我是否对Pushstate和路由的情况了解得很好，但是我一直试图使用pagejs或grapnel或其他类似的JavaScript路由器来路由单个页面应用程序。

我想要的是能够在程序中导航， 以及通过在位置栏中手动输入路线进行导航（这样我就可以将指向水疗中心各个部分的链接发送给第三方）。 我无法使用以下代码手动导航到/ test路由。

以下是pagejs的示例。

如果收到请求/ login的请求，我还使自己的nodejs后端重定向到/＃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' ）在地址栏中更改任何内容时，浏览器将始终对此请求，afaik无法解决，如果存在，它将这是一个安全问题，因为页面可能会通过不允许导航到其他任何网址来劫持您的浏览器。 如果希望能够通过在位置栏中键入SPA来加载SPA中的特定URL，则需要服务器做出响应。 在SPA中，通常会返回与加载SPA相同的html。 现在，似乎pagejs不尊重位置栏中的网址，并继续加载/ （我相信我之前已经看过），作为一种解决方法，您可以尝试将page()设置为window.location.pathname当您的应用加载时，看看是否能解决您的第二个问题。

另外，hashbang网址（默认情况下，不启用page）是启用的，您需要使用page({hashbang: true})启用它们。