1

我不确定我是否很好地理解 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。

4

1 回答 1

1

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

此外，hashbang url，默认情况下并没有通过 page 启用，您需要使用page({hashbang: true}).

于 2015-09-14T18:12:59.707 回答