web-dev-qa-db-fra.com

Comment accéder aux paramètres de routage dans l'application Vue.js - Nuxt - TypeScript?

Je construis un site Web basé sur Nuxt TypeScript Starter template. J'ai créé une page _id.vue routée dynamiquement à l'intérieur de mon dossier de pages et je souhaite accéder à cette propriété id à l'intérieur de ma classe TS. Je peux y accéder dans mon modèle en écrivant {{$ route.params.id}} mais lorsque j'essaie de faire référence à $ route à l'intérieur de la classe, une erreur se produit:

error TS2304: Cannot find name '$route'.
javascripttypescriptvue.jsnuxt.js
3
Andrew Bogdanov

Comme solution simple, essayez d’importer route depuis vue-router, comme ceci:

<script lang="ts">
import Component from "vue-class-component"
import { Route } from "vue-router"

@Component({})
export default class RoutingExample extends Vue {
    created() {
        console.log(this.$route) // this should not throw TS errors now
    }

}
</script>

Je pense que d’autres solutions vous obligeraient à augmenter le module Vue , quelque chose de similaire à ce que vous trouverez ici dans la documentation Vue .

Plus d’exemples Vue + TypeScript sont disponibles dans ce référentiel: https://github.com/jsonberry/vue-TypeScript-examples

1
Jason Awbrey

J'ai pu accéder à route.params via la fonction fetch, en prenant les paramètres de l'objet context transmis par défaut à cette fonction:

<script lang="ts">
import Component from "nuxt-class-component"
@Component({})
export default class RoutingExample extends Vue {
    fetch ({ store, params }) {
       console.log("params:", params.id);
       ...
    }
}
</script>

mais la mise en garde est que les paramètres ne seraient disponibles que dans le crochet d'extraction, pas dans d'autres crochets tels que créés ou montés. Donc, la réponse de Jason est également valide

0
Andrew Bogdanov