4
votes

La page d'erreur Nuxt 404 doit rediriger vers la page d'accueil

Je cherche un moyen de toujours rediriger vers la page d'accueil lorsqu'une page n'existe pas en utilisant Nuxt.Js.

La génération de notre sitemap a rencontré des problèmes il y a quelques jours et nous avons envoyé des URL incorrectes qui n'existent pas. Google Search Console affiche un grand nombre de 404 et nous voulons les corriger avec une redirection 301 vers la page d'accueil.

J'ai essayé ceci

  async asyncData({ redirect }) {
    return redirect(301, '/el?e=rnf')
  },

et bien que la page redirige vers la page d'accueil avec succès Je pense que Google aura des problèmes avec cela puisque les pages sont initialement rendues avec 404.

J'ai également essayé ceci

created() {
    this.$router.push(
      this.localePath({
        name: 'index',
        query: {
          e: 'er'
        }
      })
    )
  }

mais je ne l'ai pas fait fonctionne (même chose avec fetch)

Des idées sur une solution à ce problème?

vue.js nuxt.js seo

5 commentaires

Avez-vous essayé le middleware pour 404 avec redirection?

@gleam Non, comment pourrais-je vérifier cela?

ajouter un middleware à 404 pages. Ce middleware ne fera que la redirection 301. nuxtjs.org/api/pages-middleware

@gleam Comment ciblerais-je seulement 404 pages en pensée? Je ne sais pas si j'ai accès à l'objet d'erreur à l'intérieur du middleware.

hm ... je vais essayer d'écrire une réponse :)

3 Réponses :

2
votes

Vous pouvez créer une page 404 par défaut dans nuxt - il suffit de mettre un fichier avec un nom _.vue dans votre ~ / pages / dir. Ceci est votre page 404 :)

ou vous pouvez utiliser une autre méthode pour créer une telle page: https://github.com/nuxt/nuxt.js/issues/1614 mais je ne l'ai pas essayé

Ensuite, ajoutez une simple redirection 404 -middleware vers cette page:

// !!! not tested this code !!!
middleware: [
  function({ redirect }) {
    return redirect(301, '/el?e=rnf')
  },
],

2 commentaires

Je recherche une meilleure solution qui fonctionnera également pour les pages enfants telles que .com / test / test / test. Cela fonctionnerait-il dans ce cas? : /

_.vue est une page d'erreur globale 404. Il fonctionnera sur n'importe quelle route (ex: / asd / asd / as / das / e / zxvc / s / wde / gw => _.vue => middleware => 301)

2
votes

Personnellement, je conseillerais de créer une page 404 qui offre une meilleure expérience utilisateur par rapport au fait d'être redirigé vers une page d'accueil et d'être potentiellement confus sur ce qui s'est passé.

Pour créer une page d'erreur personnalisée, créez simplement le fichier error.vue dans le dossier layouts et traitez-le comme une page. Consultez la documentation officielle . Nous l'avons mis en œuvre de nombreuses fois et Google ne s'est jamais plaint de cela.

Pourtant, la solution de gleam est intelligente et si elle sert le but, très bien. Je voulais juste souligner une autre solution.

0 commentaires

2
votes

Si vous devez fournir des itinéraires personnalisés à vos utilisateurs comme domain.com/ puis mettre un fichier avec un nom _.vue dans votre répertoire ~ / pages / ne fonctionnera pas, car vous en aurez besoin pour vos itinéraires utilisateur personnalisés.

Pour une flexibilité maximale, utilisez le dossier des mises en page comme indiqué par Dan

0 commentaires