Внешняя маршрутизация

использоватьVue+vue-routerСоздать одностраничное приложение очень просто,vue-routerПредоставляемая функция состоит в том, чтобы сопоставлять компоненты с маршрутами, а затем отображать их.vue-routerНеобходимо удовлетворить две потребности

Запись статуса текущей страницы
Вы можете использовать функции браузера вперед и назад

а такжеvue-routerЧтобы удовлетворить два вышеуказанных требования, реализованы следующие три функции.

Измените URL-адрес, не позволяя браузеру сделать запрос к серверу.
Обнаружение изменений URL
Перехватывать URL-адреса и анализировать необходимую информацию для соответствия правилам маршрутизации.

Особенности хеш-режима

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

Поскольку изменение значения хеша не приведет к тому, что браузер отправит запрос на сервер, а изменение хеша вызовет событие hashchange, браузер также может управлять движением вперед и назад, поэтому до появления HTML5 хэш в основном использовался для реализовать интерфейсную маршрутизацию.

Особенности режима истории

Воспользуйтесь преимуществами нового HTML5pushState()а такжеreplaceState()Два API, через которые переход по URL не будет перезагружать страницу

В то же время режим истории решает проблему режима хеширования.Хэш-параметр основан на URL-адресе.Если вы хотите передать сложные данные, будут ограничения по объему.Режим истории может не только передавать параметры в URL-адресе , но также хранить данные в конкретном объекте

реализация vue-маршрутизатора

Разница между режимом хеширования и режимом истории для достижения vue-router jump api

api	hash	history
push	window.location.assign	window.history.pushState
replace	window.location.replace	window.history.replaceState
go	window.history.go	window.history.go
back	window.history.go(-1)	window.history.go(-1)
forward	window.history.go(1)	window.history.go(1)