[Vuejs]-How to pass props with vue-router and Single File Components

by

1👍

✅

It looks like you haven’t actually passed anything on the route definition.

Something like this maybe? What values are you expecting?

{path: '/dashboard', name: 'dashboard', component: Dashboard, props: { currentTeam: currentTeamVariable, user: 'someuser'}
👤Squiggs.

2👍

Where do your values for currentTeam and user come from?

Right now it looks like you are trying to bind user and current-team to a div element in your dashboard component, which won’t do anything. You want to pass your props to the dashboard component from app.js somehow.

With regard to your routes, you’ve set props: true on your only route. This setting (referred to as boolean mode) just passes the route.params as your props to the underlying component. However, you don’t specify any params (variables signified by a colon) in your path for /dashboard, so this also won’t pass anything to your component.

(e.g. Route params are something like path: /dashboard/:dashboardId. With props: true this would pass a the param to the underlying component as a prop called dashboardId. I don’t think this is what you want.)

One option is to directly specify the props in the route as @Squiggs suggested.

Your other option is to use the dashboard component in your template for app.js and pass the props to the component that way. e.g.

//app.js
<template>
  <div>
    <dashboard :user="userVariable" :currentTeam="currentTeamVariable"></dashboard>
  </div>
</template>

This will work with router-view as well, but gets awkward when your other paths don’t use those props.

//app.js
<template>
  <div>
    <router-view :user="userVariable" :currentTeam="currentTeamVariable"></router-view>
  </div>
</template>

It comes down to where those pieces of data come from and how you want to use them in your app. If it’s application state data that will need to be used across the entire application, it may be worth looking into Vuex.

👤Slotheroo

Leave a comment