Разные режимы истории

Опция history при создании экземпляра маршрутизатора позволяет выбрать различные режимы истории.

Режим Hash

Режим истории хешей создается с помощью createWebHashHistory():

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

Он использует символ хеша (#) перед фактическим URL, который передаётся внутри. Поскольку эта часть URL никогда не отправляется на сервер, она не требует специальной обработки на уровне сервера. Однако это негативно сказывается на SEO. Если это для вас проблема, используйте режим истории HTML5.

Режим HTML5

Режим HTML5 создаётся с помощью createWebHistory() и является рекомендуемым режимом:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

При использовании режима истории URL будет выглядеть «нормально», например, https://example.com/user/id. Красиво!

Однако есть проблема: так как наше приложение — это одностраничное приложение на стороне клиента, без надлежащей конфигурации сервера пользователи получат ошибку 404, если они обратятся к https://example.com/user/id напрямую в своём браузере. Не очень красиво.

Не беспокойтесь: для решения проблемы вам нужно добавить простую обратную маршрутизацию на все случаи к вашему серверу. Если URL не соответствует никаким статическим ресурсам, он должен отдавать ту же самую страницу index.html, в которой находится ваше приложение. Снова красиво!

Примеры конфигураций сервера

Примечание: В следующих примерах предполагается, что ваше приложение размещается в корневой папке. Если вы разворачиваете его в подпапке, необходимо использовать опцию publicPath Vue CLI и соответствующее base свойство маршрутизатора. Вам также необходимо скорректировать примеры ниже, чтобы использовать подпапку вместо корневой (например, заменив RewriteBase / на RewriteBase /name-of-your-subfolder/).

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Вместо mod_rewrite, можно также использовать FallbackResource.

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Native Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80

http
  .createServer((req, res) => {
    fs.readFile('index.html', 'utf-8', (err, content) => {
      if (err) {
        console.log('We cannot open "index.html" file.')
      }

      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8',
      })

      res.end(content)
    })
  })
  .listen(httpPort, () => {
    console.log('Server listening on: http://localhost:%s', httpPort)
  })

Express с Node.js

Для Node.js/Express рассмотрите использование connect-history-api-fallback middleware.

Службы Интернета (IIS)

1. Установите IIS UrlRewrite
2. Создайте файл web.config в корневой директории вашего сайта со следующим содержимым:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Caddy v2

try_files {path} /

Caddy v1

rewrite {
    regexp .*
    to {path} /
}

Firebase hosting

Добавьте это в ваш firebase.json:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Netlify

Создайте файл _redirects, который включён в ваши развернутые файлы:

/* /index.html 200

В проектах vue-cli, nuxt и vite этот файл обычно находится в папке static или public.

Подробнее о синтаксисе можно узнать на странице документации Netlify. Вы также можете создать netlify.toml, чтобы объединить перенаправления с другими функциями Netlify.

Ограничение

Существует ограничение: ваш сервер больше не будет сообщать об ошибках 404, поскольку все ненайденные пути теперь отображают ваш файл index.html. Чтобы обойти проблему, вы должны реализовать обратный маршрут в своём приложении Vue, чтобы отобразить страницу 404:

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})

В качестве альтернативы, если вы используете сервер Node.js, вы можете реализовать обратный маршрут, используя маршрутизатор на стороне сервера для сопоставления входящего URL и ответа 404, если маршрут не найден. Подробнее об этом см. в документации Vue по SSR (рендерингу на стороне сервера).