Vue-routeur de rediriger sur la page non trouvée (erreur 404)

Je suis en train de rediriger vers 404.html sur la page à l'aide de la router.beforeEach hook global, sans beaucoup de succès (à l'aide de 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 une redirection vers la page 404.html quand un non-existant route est inséré, juste me donner un vide fragment. Seulement lorsque le codage en dur some-site.com/* il va rediriger la some-site.com/404.html

Je suis sûr qu'il ya quelque chose de très évident ici que je suis dominant, mais je ne peux pas comprendre ce que.

Veuillez noter que ce que je suis à la recherche d'un rediriger vers une nouvelle page, pas une redirection vers une autre voie, qui pourrait être facilement obtenus en utilisant router.redirect comme dans ces extraits:

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

Alors que sur mon router.map, j'ai pu avoir les éléments suivants:

 router.map({
    '/404': {
        name: '404'
        component: {
            template: '<p>Page Not Found</p>'
        }
    }
})
  • Je n'ai pas encore trouvé de solution, mais ce qui se passe si vous essayez d'accéder à un itinéraire à l'aide de <a> balise qui n'est pas géré par Vue routeur? Est-il naviguer hors de l'app?
  • Il sera accédez à l'itinéraire prévu, indépendamment de savoir si j'utilise href ou v-link (par exemple, href="some-site.com/home" au lieu de v-link="{nom:'accueil'}"). Vous ne savez pas si c'est ce que vous demandez?
  • Mes excuses, je pensais à la façon de sortir de l'app, même quand nous avons <base href="/">. Qui n'était pas relié à votre question, de toute façon. J'ai posté mes pensées comme une réponse ci-dessous, s'il vous plaît essayer it out et laissez-moi savoir si ça fonctionne!
InformationsquelleAutor pierreb | 2016-10-22
  1. 74

    Je pense que vous devriez être en mesure d'utiliser par défaut un gestionnaire d'itinéraire et de redirection à partir de là à une page en dehors de l'application, comme détaillé 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 }
    ]
})

    Ci-dessus PageNotFound définition de composant, vous pouvez spécifier la redirection, qui vous fera sortir de l'app:

    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 sur created crochet comme indiqué ci-dessus, ou mounted crochet aussi.

    Veuillez noter:

    1. Je n'ai pas vérifié ci-dessus. Vous avez besoin de construire une version de production de l'application, s'assurer que la redirection se passe. Vous ne pouvez pas tester cela dans vue-cli car elle nécessite côté serveur de la manipulation.

    2. Généralement en une seule page des applications, le serveur envoie le même index.html avec l'app de scripts pour toutes les demandes de trajets, surtout si vous avez défini <base href="/">. Ceci ne fonctionnera pas pour votre /404-page.html sauf si votre serveur traite comme un cas particulier et qui sert à la page statique.

    Laissez-moi savoir si cela fonctionne!

    • Je pense que la vraie réponse est côté serveur de la manipulation, comme détaillé dans la partie "Remarque" ci-dessus. Votre router.beforeEach fait la même chose que dans ma méthode. Votre serveur doit gérer 404.html comme un cas spécial, que vous pouvez tester que dans un serveur, pas vue-cli.
    • Votre solution a très bien fonctionné, merci beaucoup! Aussi, merci pour l'astuce concernant le côté serveur de la manipulation avec router.beforeEach. Je suis à l'aide d'une machine locale (vagrant+virtualbox) l'exécution de nginx. Je vais jouer avec la configuration et voir si je peux trouver une solution côté serveur.
    InformationsquelleAutor Mani
  2. 2

    @mani Originale de réponse est tout ce que vous voulez, mais si vous souhaitez également lire dans la manière officielle, voici

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

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

    InformationsquelleAutor Qback