CODEWITHSUNDEEP
javascriptvuejs2vue-router
Mortz
Mortz

Reputation: 4939

Passing multiple props to Vue component in a route (vue-router)

Gurus,

I have a VueJS child component which I was running as follows and works fine - 

<app-shopping :categories="categories" :imageList="imageList">

Now I want to add a separate route for this, but I am not sure how to pass the categories and imageList props in the route declaration. I am doing this - 

import appShopping from '../components/AppShopping.vue';
export const routes = [
  { path: '/',
  component: appShopping,
  props: true,
},
];

Can someone tell me how do I pass props from the parent component to this component? Thanks for your help

EDIT: ADDING TO THE QUESTION How do I extend the solution if I my routes consist of different components, each with it's own set of props being passed from the parent?

EDIT 2: ADDING FURTHER While the solution given below works, it seems to unnecessarily pass not required props to child components. For example, it passes the categories and imageList props to all components that are part of the route. Is there a way out of this? Or does this call for a different approach to state management, like Vuex?

Thank you.

Upvotes: 2

Views: 2684

Answers (1)

Bert
Bert

Reputation: 82499

You can pass properties on the router-view.

<router-view :categories="categories" :imageList="imageList"></router-view>

Upvotes: 3

Related Questions