web-dev-qa-db-fra.com

Vue-router redirect sur la page introuvable (404)

J'essaie de rediriger vers 404.html à la page introuvable en utilisant le hook router.beforeEach global, sans grand succès (avec Vueet Vue-Router 1.0):

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

Ce n'est pas rediriger vers la page 404.html quand une route inexistante est insérée, me donnant simplement un fragment vide. Ce n'est que lors du codage en dur que some-site.com/* sera redirigé vers le some-site.com/404.html attendu.

Je suis sûr qu'il y a quelque chose de très évident que je néglige, mais je ne peux pas trouver quoi.

Veuillez noter que ce que je recherche, c’est une redirection vers une nouvelle page, et non une redirection vers un autre itinéraire , ce qui pourrait être facilement réalisé en utilisant router.redirect comme dans ces extraits:

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

Alors que sur mon router.map, je pourrais avoir les éléments suivants:

 router.map({
    '/404': {
        name: '404'
        component: {
            template: '<p>Page Not Found</p>'
        }
    }
})
http-status-code-404vue.jsvue-router
26
pierreb

Je pense que vous devriez être capable d'utiliser un gestionnaire de route par défaut et de le rediriger vers une page extérieure à l'application, comme indiqué ci-dessous:

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 }
    ]
})

Dans la définition du composant PageNotFound ci-dessus, vous pouvez spécifier la redirection réelle, qui vous fera sortir complètement de l'application:

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

Vous pouvez le faire soit avec le crochet created comme indiqué ci-dessus, ou aussi avec le crochet mounted.

Notez s'il vous plaît:

  1. Je n'ai pas vérifié ce qui précède. Vous devez créer une version de production de l'application, assurez-vous que la redirection ci-dessus est effectuée. Vous ne pouvez pas tester cela dans vue-cli car cela nécessite une gestion côté serveur.

  2. Généralement, dans les applications à page unique, le serveur envoie le même fichier index.html ainsi que les scripts d'application pour toutes les demandes d'itinéraire, en particulier si vous avez défini <base href="/">. Cela échouera pour votre /404-page.html à moins que votre serveur ne le considère comme un cas spécial et serve la page statique.

Laissez-moi savoir si cela fonctionne!

63
Mani

La réponse originale de @ mani est tout ce que vous voulez, mais si vous voulez aussi la lire de manière officielle, voici

Référence à la page officielle de Vue:

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

1
Qback