Сколько режимов маршрутизации имеет 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
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose