無法使用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})啟用它們。