Различные режимы history
Опция history при создании экземпляра маршрутизатора позволяет выбрать один из нескольких history-режимов.
Режим Hash
Hash-режим history создается с помощью функции createWebHashHistory():
Он использует символ хэша (#) перед фактическим URL, который внутренне передается. Поскольку этот раздел URL никогда не отправляется на сервер, на сервере он не требует специальной обработки. Однако у нее есть плохое воздействие на SEO. Если это вас беспокоит, используйте history режим HTML5.
Режим HTML5
Режим HTML5 создается с помощью createWebHistory() и является рекомендуемым режимом:
При использовании createWebHistory() URL будет выглядеть "нормально", например, https://example.com/user/id. Прекрасно!
Возникает проблема: поскольку наше приложение - это одностраничное клиентское приложение, без правильной конфигурации сервера, пользователи получат 404 ошибку, если они попробуют перейти в своем браузере напрямую по адресу https://example.com/user/id. Это не очень красиво.
Не переживайте: чтобы решить эту проблему, достаточно добавить на свой сервер простой резервный маршрут (fallback). Если URL-адрес не соответствует никаким статическим файлам (assets), он должен возвращать ту же самую страницу index.html, на которой живет ваше приложение. И снова красота!
Режим Memory
Memory-режим не предполагает наличия окружения браузера и, следовательно, не взаимодействует с URL, автоматически не запускает начальную навигацию. Это делает его идеальным для среды Node и рендеринга на стороне сервера (SSR). Он создается с помощью createMemoryHistory() и требует вручную запустить начальную навигацию после вызова app.use(router).
Хотя это и не рекомендуется, вы можете использовать этот режим в приложениях браузера, но учтите, что в нем не будет истории, то есть вы не сможете вернуться назад или вперед.
Примеры конфигураций сервера
Примечание: В приведенных ниже примерах предполагается, что приложение запускается из корневой папки. При развертывании в подпапку необходимо использовать опцию publicPath из Vue CLI и соответствующее свойство base маршрутизатора. Также необходимо скорректировать приведенные ниже примеры, чтобы использовать подпапку вместо корневой папки (например, заменить RewriteBase / на RewriteBase /name-of-your-subfolder/).
Apache
Заместо mod_rewrite можно также использовать FallbackResource.
nginx
Нативный Node.js
Express c Node.js
Для Node.js/Express рассмотрите возможность использования миддлвары connect-history-api-fallback middleware.
Internet Information Services (IIS)
- Установите IIS UrlRewrite
- Создайте в корневом каталоге сайта файл
web.configсо следующими параметрами:
Caddy v2
Caddy v1
Хостинг Firebase
Добавьте это в файл firebase.json:
Netlify
Создайте файл _redirects, который включается в состав опубликованных файлов:
В проектах vue-cli, nuxt и vite этот файл обычно располагается в папке с именем static или public.
Подробнее о синтаксисе можно прочитать в документации Netlify. Вы также можете создать файл netlify.toml, чтобы объединить перенаправления с другими возможностями Netlify.
Vercel
Создайте в корневом каталоге проекта файл vercel.json, содержащий следующее:
Caveat
Есть один нюанс: ваш сервер больше не будет сообщать об ошибках 404, так как все несуществующие пути теперь открывают ваш файл index.html. Чтобы избежать этой проблемы, вы должны внедрить обработку всех маршрутов в вашем приложении Vue, чтобы показать страницу ошибки 404:
Либо, если вы используете сервер Node.js, вы можете внедрить поддержку 404 ошибки, используя маршрутизатор на сервере для сопоставления входящего URL и ответа с ошибкой 404, если маршрут не был найден. Подробнее ознакомьтесь с документацией по серверному рендерингу Vue для дополнительной информации.