Как я могу использовать # -URLs в одностраничном приложении?

В этой статье довольно убедительный аргумент в пользу того, что URL-адреса являются долговечными (они получают закладки и передаются), они должны иметь смысл и использовать хэш для реальной маршрутизации (определение того, какие данные отображаются на странице и/или состоянии приложения), таким образом, является ненадлежащим. Однако, когда я пытаюсь сделать это в своем одностраничном приложении, я столкнулся с проблемой: как мне отображать мои ссылки, чтобы все браузеры могли использовать приложение? Как я вижу, есть три варианта:

  1. все href имеют префикс #/. Это отлично работает в браузерах HTML4. В браузерах HTML5 я могу добавить маршрут Sammy, который перенаправляется на версию без хеша, которая также отлично работает. Возможно, проблема связана с тем, что браузеры отмечают ссылки как посещаемые, когда они не отмечают или не отмечают их, когда они есть. Другая проблема в том, что это... неправильно. Любой, кто разделяет ссылку, щелкнув ее правой кнопкой мыши и выбрав "Копировать URL-адрес ссылки", будет отправлять рабочий URL-адрес.
  2. no href имеют префикс #/. Насколько я могу судить, браузеру HTML4 не удастся перехватить эти клики, что означает, что каждый из них вызовет обновление страницы. Хотя приложение, вероятно, по- прежнему функционировать, так как я мог бы использовать Сэмми маршруты переписать версии hashless на Hashy них на странице загрузки, загрузки страницы будет убить производительность приложения одной страницы.
  3. Я динамически определяю, стоит ли префикс с #/ или нет. Это означает, что все мои ссылки должны иметь динамическую разметку и значительно усложнять приложение.

Ответ 1

hash значение URL-адреса никогда не вызывало и не перегружало всю страницу. Не в HTML4 и до этого. Хеш-значение всегда было внутренней ссылкой, поэтому его можно использовать отлично (посмотрите, например, на твиттер). Конечно, когда вы обновляете страницу, вы перезагружаете страницу. Но это очевидно.

С помощью JavaScript вы можете прочитать это хеш-значение (см. Также этот вопрос/ответ: как вы можете проверить #hash в URL с помощью JavaScript?), Используя window.location.hash

Используя более поздний браузер, вы также можете обнаружить хэш-изменение, которое полезно, если пользователи действительно изменяют URL-адрес: On - window.location.hash - Изменить?

Но когда вы, как веб-сайт, меняете URL-адрес, который вам не нужен, вы уже знаете, потому что вы его просто изменили.

Таким образом, используя хэши, люди могут обмениваться URL-адресами, и вы действительно можете прочитать, какой URL-адрес они запрашивают, и поэтому он должен работать отлично.