Перенаправление Vue-router на странице не найдено (404)

Я думаю, вы должны иметь возможность использовать обработчик маршрута по умолчанию и перенаправлять оттуда на страницу за пределами приложения, как подробно описано ниже:

const ROUTER_INSTANCE = new VueRouter({
    mode: "history",
    routes: [
        { path: "/", component: HomeComponent },
        // ... other routes ...
        // and finally the default route, when none of the above matches:
        { path: "*", component: PageNotFound }
    ]
})

В приведенном выше определении компонента PageNotFound вы можете указать фактическое перенаправление, которое полностью выведет вас из приложения:

Vue.component("page-not-found", {
    template: "",
    created: function() {
        // Redirect outside the app using plain old javascript
        window.location.href = "/my-new-404-page.html";
    }
}

Вы можете сделать это либо на created, как показано выше, либо также на mounted.

Пожалуйста, обрати внимание:

1. Я не проверял вышеизложенное. Вам необходимо создать производственную версию приложения, убедитесь, что происходит указанное выше перенаправление. Вы не можете проверить это в vue-cli, так как это требует обработки на стороне сервера.

2. Обычно в одностраничных приложениях сервер отправляет один и тот же index.html вместе со сценариями приложения для всех запросов маршрута, особенно если вы установили <base href="/">. Это не удастся для вашего /404-page.html, если ваш сервер не будет рассматривать его как особый случай и не будет обслуживать статическую страницу.

Сообщите мне, если это сработает!

Обновление для Vue 3 и более поздних версий:

Вам нужно будет заменить свойство '*' path на '/:pathMatch(.*)*', если вы используете Vue 3, поскольку старый универсальный путь '*' больше не поддерживается. Тогда маршрут будет выглядеть примерно так:

{ path: '/:pathMatch(.*)*', component: PathNotFound },

Дополнительную информацию см. В документации. в этом обновлении.

Ответ @mani теперь немного устарел, поскольку использование универсальных '*' маршрутов - это больше не поддерживается при использовании Vue 3 и более поздних версий. Если это больше не работает для вас, попробуйте заменить старый универсальный путь на

{ path: '/:pathMatch(.*)*', component: PathNotFound },

По сути, вы должны иметь возможность заменить путь '*' на '/:pathMatch(.*)*' и готово!

Причина: Vue Router больше не использует path-to-regexp, вместо этого он реализует собственную систему синтаксического анализа, которая позволяет ранжировать маршруты и активировать динамическую маршрутизацию. Поскольку мы обычно добавляем один универсальный маршрут для каждого проекта, поддержка специального синтаксиса для *.

(из https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes)

Оригинальный ответ @mani - это все, что вам нужно, но если вы также хотите прочитать его официальным способом, вот

Ссылка на официальную страницу Vue:

https://router.vuejs.org/guide/essentials/history-mode.html#caveat

Этот ответ может быть немного запоздалым, но я нашел приемлемое решение. Мой подход немного похож на подход @Mani, но я думаю, что мой подход немного легче понять.

Помещение его в глобальную ловушку и в сам компонент не идеально, глобальная ловушка проверяет каждый запрос, поэтому вам нужно будет написать множество условий, чтобы проверить, должно ли оно быть 404 и window.location.href при создании компонента слишком поздно, поскольку запрос ушел уже в компонент, а затем вынимаете его.

Я создал специальный URL-адрес для страниц 404 и путь * для всего, что не найдено.

{ path: '/:locale/404', name: 'notFound', component: () => import('pages/Error404.vue') },
{ path: '/:locale/*', 
  beforeEnter (to) {
    window.location = `/${to.params.locale}/404`
  }
}

Вы можете игнорировать :locale, поскольку мой сайт использует i18n, чтобы я мог убедиться, что страница 404 использует правильный язык.

Кстати, я хочу убедиться, что моя страница 404 возвращает код состояния httpheader 404 вместо 200, когда страница не найдена. Приведенное выше решение просто отправит вас на страницу 404, но вы по-прежнему получаете код состояния 200. Для этого у меня есть правило nginx, чтобы возвращать код статуса 404 для местоположения /:locale/404

server {
    listen                      80;
    server_name                 localhost;

    error_page  404 /index.html;
    location ~ ^/.*/404$ {
      root   /usr/share/nginx/html;
      internal;
    }

    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ @rewrites;
    }

    location @rewrites {
      rewrite ^(.+)$ /index.html last;
    }

    location = /50x.html {
      root   /usr/share/nginx/html;
    }
}

Не используйте редирект, используйте beforeEnter

  const  router = [


  // { path: '*', redirect: '/404'},
  { path: '*', beforeEnter: (to, from, next) => { next('/404') } },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404')
  }
]