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

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

15 голосов
/ 11 октября 2011

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

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

1 Ответ

9 голосов
/ 11 октября 2011

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

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

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

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

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

...