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

Я пытаюсь перенаправить на 404.html на странице, не найденной с использованием глобального тэга router.beforeEach, без особого успеха (используя Vue и Vue-Router 1.0):

router.beforeEach(function (transition) {
    if (transition.to.path === '/*') {
        window.location.href = '/404.html'
    } else {
        transition.next()
    }
});

Это не перенаправление на страницу 404.html, когда вставлен несуществующий маршрут, просто давая мне пустой фрагмент. Только когда жесткое кодирование some-site.com/* будет перенаправлено на ожидаемый файл some-site.com/404.html

Я уверен, что здесь есть что-то очень очевидное, что я пропускаю, но я не могу понять, что.

Обратите внимание, что я ищу перенаправление на новую страницу, а не перенаправление на другой маршрут, чего легко достичь с помощью router.redirect, например, в этих фрагментах:

router.redirect({
    '*': '404'
})

В то время как на моем router.map я мог бы иметь следующее:

 router.map({
    '/404': {
        name: '404'
        component: {
            template: '<p>Page Not Found</p>'
        }
    }
})

Ответы

Ответ 1

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

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.

Обратите внимание:

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

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

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