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

Question

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

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

以下是pagejs的例子。

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

如何利用 pushstate 以便我既可以在地址栏中手动输入地址，又可以从路由器和 html links 中导航？我在这里错过了什么？

一些示例代码：

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) 在地址栏中手动写入 link /signin 我再次导航到重定向

的 / 路由

3) 在地址栏中手动写入 link /#signin 我再次导航到重定向

的 / 路由

4) 再次点击 welcome.html 中的 link 将我重定向到 / 路由

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

Answer 1

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

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

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

Cannot perform routing with pushstate and various js routers

html

javascript

single-page-application

page.js