Passage de props aux composants de route

Utiliser $route dans vos composants crée un couplage fort à la route qui va limiter la flexibilité du composant qui ne pourra être utilisé que par certains URL.

Pour découpler un composant de son routeur, utilisez les props :

Plutôt que de coupler avec $route

const User = {
  template: '<div>Utilisateur {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/utilisateur/:id', component: User }
  ]
})

Découplez avec les props

const User = {
  props: ['id'],
  template: '<div>Utilisateur {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/utilisateur/:id', component: User, props: true },

    // pour les routes avec vues nommées, vous devez définir l'option `props` pour chaque vue nommée :
    {
      path: '/utilisateur/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

Cela vous permet d'utiliser le composant n'importe où, ce qui le rend plus facile à réutiliser et à tester.

Mode booléen

Quand props est mis à true, le route.params est remplis en tant que props du composant.

Mode objet

Quand props est un objet, cela alimente les props de celui-ci. Utile quand les props sont statiques.

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

Mode fonction

Vous pouvez créer une fonction qui va retourner les props. Cela vous permet de caster des paramètres dans un autre type, de combiner les valeurs statiques avec les valeurs des routes, etc.

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

L'URL /search?q=vue passerait {query: 'vue'} comme props au composant SearchUser.

Essayez de garder la fonction de props sans état, car il n'est évalué que sur les changements de route. Utilisez un composant englobant si vous avez besoin d'état pour définir les props, ainsi la vue pourra réagir au changement d'état.

Pour une utilisation avancée, jetez un œil à cet exemple (opens new window).