Не удается выполнить маршрутизацию с помощью pushstate и различных js-маршрутизаторов

Question

Я не уверен, насколько я хорошо понимаю ситуацию с pushstate и маршрутизацией, но я застреваю, пытаясь направить одностраничное приложение, используя либо pagejs или grapnel, либо другие подобные javascript-маршрутизаторы.

Я хочу, чтобы иметь возможность перемещаться по моей программе и путем ручного ввода маршрутов в строке местоположения (чтобы я мог отправлять ссылки на различные части моего курорта третьим лицам). Я не могу вручную перемещаться по маршруту/тесту, например, с помощью приведенного ниже кода.

Ниже приведен пример с pagejs.

Я также сделал мой nodejs backend для перенаправления на/# 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) Запись по ссылке вручную/зарегистрировались в адресной строке я снова перемещаться к/маршрута, который перенаправляет

3) написание ссылку вручную/# в зарегистрировались адресной строке я снова перемещаться в/маршрут, который перенаправляет

4) нажав на ссылку в welcome.html снова перенаправляет меня через/маршрут

5) нажатие кнопки li nk в welcome.html и смените его на/test работы.

Answer 1

Всякий раз, когда вы (вручную или иным образом, обычно устанавливая window.location = 'myurl') меняете что-либо в адресной строке, браузер всегда будет запрашивать это, афайк там нет, и если бы это было, это было бы проблема с безопасностью, поскольку страницы могут захватывать ваш браузер, не позволяя перемещаться по любому другому URL-адресу. Если вы хотите загрузить определенный URL-адрес в свой SPA, набрав его в строке местоположения, вам нужно, чтобы сервер ответил чем-то. В SPA вы обычно возвращаете тот же html, который загружает ваш SPA. Теперь, похоже, что pagejs не уважает URL-адрес в строке местоположения и продолжает загружать / (я считаю, что видел это раньше), в качестве обходного пути вы можете попробовать установить page() на window.location.pathname, когда ваше приложение загружается, и см., если это исправит вашу вторую проблему.

Также, hashbang urls, arent включен по умолчанию со страницей, вам необходимо включить их с помощью page({hashbang: true}).