Passing Props to Route Components | Vue-router pass data
Using$routeoruseRoute()inyourcomponentcreatesatightcouplingwiththeroutewhichlimitstheflexibilityofthecomponentasitcanonlybeusedoncertainURLs.Whilethisisnotnecessarilyabadthing,wecandecouplethisbehaviorwithapropsoption.Letsreturntoourearlierexample:vue
Using $route or useRoute() in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain URLs. While this is not necessarily a bad thing, we can decouple this behavior with a props option.
Lets return to our earlier example:
vue<!-- User.vue --> <template> <div> User {{ $route.params.id }} </div> </template>with:
jsimport User from ./User.vue // these are passed to `createRouter` const routes = [ { path: /users/:id, component: User }, ]We can remove the direct dependency on $route in User.vue by declaring a prop instead:
We can then configure the route to pass the id param as a prop by setting props: true:
jsconst routes = [ { path: /user/:id, component: User, props: true } ]This allows you to use the component anywhere, which makes the component easier to reuse and test.
Boolean mode [1]When props is set to true, the route.param...