web-dev-qa-db-fra.com

VueJS | Comment accéder au paramètre du routeur dans mon composant

J'ai essayé d'accéder à mon paramètre : id dans mon Entry composant. Je l'ai essayé avec des accessoires mais cela ne fonctionne pas. Une idée? Je ne trouve rien.

export default new Router({
    routes: [{
        path: '/entry/:id',
        name: 'Entry',
        component: Entry
    }]
})

Merci

vue.jsvuejs2vue-router
10
bonblow

Bien que la réponse de soju soit correcte, j'ai tendance à utiliser la méthode dans laquelle les documents se réfèrent à "découpler le routeur à l'aide d'accessoires".

Cela peut être accompli en ajoutant l'option props: true à votre itinéraire et en définissant une propriété dans votre composant.

Ainsi, dans votre itinéraire, vous auriez:

export default new Router({
     routes: [{
          path: '/entry/:id',
          name: 'Entry',
          component: Entry,
          props: true
     }]
})

Ensuite, dans votre composant, vous ajoutez un accessoire:

Vue.component('Entry', {
       template: '<div>ID: {{ id}}</div>',
       props:['id']
})

Tout cela peut être trouvé dans les documents: Passing Props to Route Components

16
Russell Shingleton

Vous devez simplement utiliser $route.params.id ou this.$route.params.id.

En savoir plus: https://router.vuejs.org/guide/essentials/dynamic-matching.html

Vous devriez envisager d'utiliser des accessoires: https://router.vuejs.org/en/essentials/passing-props.html

14
soju

vous pouvez utiliser dans le composant

this.$route.params.id
9
mohammad nazari

Avec en html <div>{{$route.params.id}}</div>

Avec dans le script this.$route.params.id

2
siva hari
<template>
    <div>
      <p>{{id}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id:this.$route.params.id
            }
        },
    }
</script>
1
Bhavik Tarpara