Vue - Как создать страницу ошибки 404 с кодом ответа 404 - PullRequest
Новая
       32

Vue - Как создать страницу ошибки 404 с кодом ответа 404

0 голосов
/ 27 мая 2020

Как я могу создать страницу с ошибкой 404 с кодом ответа 404 в Vue? Вот маршрут для 404. 

{
    path: "*",
    name: "404",
    component: load("404"),
    alias: "/404"
  }

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Вы не сможете установить код состояния HTTP в одностраничном приложении - вся маршрутизация выполняется на той же странице в браузере, поэтому после загрузки страницы больше не будут получены коды состояния HTTP.

Однако, если вы попытаетесь загрузить несуществующий маршрут, напрямую набрав / скопировав URL-адрес в адресную строку браузера, вы можете использовать nginX (или любое другое серверное программное обеспечение, которое вы используете), чтобы сигнализировать Статус 404 HTTP: 

server {
  error_page 404 /404.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

Но это не практичный / мудрый подход - в основном, вы хотите, чтобы каждый несуществующий путь был разрешен до /index.html, чтобы ваш SPA всегда загружался и однажды загружался - он определит, что этот маршрут не существует, и отобразит ваш компонент 404.

Итак, ваша nginX конфигурация должна выглядеть так: 

server {
  ...

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

Переменная $is_args добавит ? если $args не пусто, а $args предоставит параметры запроса (если есть).

0 голосов
/ 27 мая 2020

Ваше определение маршрута выглядит нормально, за исключением того, что я не знаю, как работает ваша функция load, т.е. как она преобразуется в компонент Vue. Но в целом ваш код следует общему подходу, описанному в Vue документации маршрутизатора . Обычно вам здесь не нужны name или alias, поскольку этот маршрут не используется явно. Просто вставьте компонент, который показывает ваш «не найденный» контент, и вы должны быть готовы go: 

{
  path: "*",
  component: PageNotFound
}

Поскольку это очень близко к коду, который вы предоставили, пожалуйста, объясните, что именно дает вам проблема.

...