Généralement, avec les paramètres de route dans les composants, la plupart des gens font ce qui suit.
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
L'utilisation de $route dans un composant entraîne un couplage élevé avec sa route correspondante, limitant la flexibilité du composant en le restreignant à certaines URL. La bonne façon est de découpler à travers les accessoires.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: true
}]
})
Après avoir défini l'attribut props de la route sur true, le composant peut recevoir des paramètres params via des props.
export default {
props: [ id ],
methods: {
getParamsId() {
return this.id
}
}
}
Vous pouvez également renvoyer des accessoires via le modèle de fonction.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: (route) => ({
id: route.query.id
})
}]
})