web-dev-qa-db-fra.com

Nuxt.JS: Comment obtenir les paramètres d'URL de route dans une page

J'utilise Nuxt.js et j'ai une page dynamique définie sous

pages/post/_slug.vue

Ainsi, lorsque je visite l'URL de la page, disons http: // localhost: 3000/post/hello-world , comment puis-je lire cette valeur de paramètre de slug dans ma page.

Actuellement, je l'obtiens en utilisant asyncData comme suit:

  asyncData ({ params }) {
    // called every time before loading the component
    return {
      slug: params.slug
    }
  }

Cela fonctionne bien, mais je pense que ce n'est pas la meilleure façon, et il devrait y avoir une meilleure façon de rendre le paramètre disponible sur la page. Toute aide est appréciée!

javascriptvue.jsnuxt.js
10
asanas

Dans la page vue fichier, utilisez ceci pour obtenir l'objet route:

this.$route

comme ça:

<script>
export default {
  mounted() {
    console.log(this.$route.fullPath);//or $route.path, which excluding url query 
  }
};
</script>

les paramètres du chemin url se trouvent sous route.params, comme dans votre cas route.params.slug

<script>
export default {
  mounted() {
    console.log(this.$route.params.slug);
  }
};
</script>

le vue mouted hook run only client, lorsque vous voulez obtenir les paramètres sur le serveur, vous pouvez utiliser la méthode asyncData:

<script>
export default {
    asyncData({route, params}) {
        //use route
        console.log(route.params.slug)
        //directly use params
        console.log(params.slug)
    }
};
</script>

si vous souhaitez uniquement exécuter le code sur le serveur:

<script>
export default {
    asyncData({route, params}) {
        if (process.server) {
            console.log(route.params.slug)
        }
    }
};
</script>

si vous n'avez pas besoin des informations parms sur le serveur, je pense que vous n'avez tout simplement pas besoin de la méthode asyncData.

12
Franci

Vous pouvez simplement accéder aux paramètres de routage

pour des utilisations mondiales mais ce n'est pas une bonne pratique:

fenêtre. $ nuxt._route.params

pour les utilisations locales sous pages/composants/mise en page, etc., nous devons toujours pratiquer comme ci-dessous

this. $ route

ou

$ nuxt._route.params

2
Md Mahamudul Hasan

La documentation Nuxt est bien maintenue et selon le https://nuxtjs.org/api/context/ asyncData expose l'API pour accéder à diverses fonctionnalités de routeur et de serveur. Pour plus de précisions, vous pouvez consulter les exemples officiels sur le portail Nuxtjs. https://nuxtjs.org/examples/custom-routes

1
Pravin Singh

Les autres réponses sont généralement suffisantes, si vous souhaitez accéder aux informations sur l'itinéraire dans apollo requête intelligente:

  apollo: {
    items: {
      query: jobsBy,
      variables() {
        return {
          clientId: this.$route.query.id
        }
      },
    }
  }
0
bob

À ma connaissance, c'est déjà la meilleure façon, sinon la seule, de le faire. Mais je pourrais suggérer une approche légèrement différente qui pourrait être adaptée à vos besoins. tilisez la méthode asyncData pour récupérer les données du serveur au lieu de mettre un paramètre à votre VM et traiter plus tard, si tel est votre cas. Ensuite , vous pouvez gérer les données result dans la logique de présentation et non tout type de demande . D'autre part, vous aussi pourrait utiliser, récupérer si vous ne voulez rien transmettre au VM ou utiliser un middleware à la place, selon vos besoins .

0
monk