Сколько режимов маршрутизации имеет vue-router?
Сколько режимов маршрутизации имеет vue-router?

Vue Router предоставляет три режима маршрутизации:

1: Режим хеширования (по умолчанию):

существовать URL Используется с # 符号из Управление хэш-значениеммаршрутизация。Например:http://xxxx.com/#/path。 существовать Hash режим, когда URL При изменении хэш-значения браузер не отправляет запрос на сервер, а слушает hashchange События для маршрутизации навигации.

2: Режим истории:

использовать HTML5 из History API для управления маршрутизацией. В этом режиме URL-адрес использовать больше не нужные хэши, а напрямую использовать обычный из URL адрес。Например:http://xxxx.com/path。 существовать History режим, когда URL Когда произойдет изменение, Браузер отправит запрос на сервер, и серверу необходимо настроить соответствующее правило измаршрутизации, чтобы гарантировать, что существование обновляет страницу или обращается к ней напрямую. URL может правильно реагировать на маршрутизацию.

3: Абстрактный режим:

Этот видмодель В основном используется для не-Браузерсреда,напримерсуществоватьсервер Боковой рендеринг(Server-Side Rendering)часиспользовать。 существовать Abstract режим, Вью Router Ни за что URL провести любую обработку,Вместо этого информация о маршрутизации сохраняется в памяти существующих,маршрутизация навигации программным способом.

Может быть создан Vue Router Время экземпляра из mode 配置项来выбиратьиспользовать Какой видмаршрутизациямодель。Например:

Язык кода:javascript
копировать
const router = new VueRouter({
  mode: 'history', // использовать History модель
  routes: [...]
})

существоватьиспользовать History модельчас,нуждаться Конфигурация сервера для поддержки нормальной работы маршрутизации. Конкретные методы настройки см. Vue Router Официальная документация или соответствующее руководство по настройке сервера.

Каковы различия между режимами маршрутизации Vue Router?

Vue Router издругоймаршрутизациямодель(Hash Узор, История режим и Abstract режимы) имеют следующие отличия:

1: Формат URL:
  • Hash Шаблон: URL-адрес средний с # Символы и хеши, например. http://xxxx.com/#/path
  • History Шаблон: URL-адрес Нет # Символ, прямое использование нормального из URL Адрес, например http://xxxx.com/path
  • Abstract Режим: не продолжать URL Информация об обработке, маршрутизации сохраняется в существующем виде, пригодном для не-Браузерских сред.
2: Поведение браузера:
  • Hash Шаблон: URL-адрес Браузер сработает при изменении хэш-значения hashchange События, Вью Router Прослушайте это событие для маршрутизации навигации и не отправляйте запрос на сервер.
  • Шаблон истории: Изменение URL-адреса,Браузер отправит запрос на сервер,серверу необходимо настроить соответствующие правила измаршрутизацииправильно ответитьмаршрутизация。
  • Абстрактная модель: не учитывает поведение Браузера.,маршрутизация Сохранение информациисуществоватьв памяти,Подходит для сред, отличных от Браузер.
3. Обновите страницу:
  • Hash Mode: при обновлении страницы URL-адрес из хеш-значения не будет отправляться на сервер,Все еще застрял передняя часть,Таким образом, интерфейсная часть может восстановить состояние приложения по хеш-значению.
  • History Режим: при обновлении страницы URL-адрес будет отправлен на сервер, серверу необходимо настроить соответствующие правила измаршрутизации, чтобы правильно реагировать на маршрутизацию, в противном случае это приведет к 404 ошибка.
  • Абстрактная модель: не учитывает поведение Браузера.,Как бы вы ни обновляли страницу, запрос на сервер не будет отправлен.
4: Конфигурация сервера:
  • Хэш-модель: специальная настройка не требуется.,Потому что хеш-значение не отправляется на сервер.
  • History модель: конфигурация сервера необходима для поддержки маршрутизации для нормальной работы, в основном для существования возможности обновления страницы или прямого доступа URL может правильно реагировать на маршрутизацию.
  • Абстрактная модель: не требует настройки сервера.,Подходит для сред, отличных от Браузер.

выбиратьиспользовать Какой видмаршрутизациямодельзависит от проектаиз需求和среда。 Hash Режим прост в использовании и не требует настройки сервера, но URL с хеш-значением; History Режим удаляет хэш-значение и является более традиционным. URL в форме, но требует поддержки конфигурации сервера; Abstract Шаблоны предназначены для использования в средах, отличных от браузера, и не влияют на поведение браузера.

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода