CODEWITHSUNDEEP
javascriptvue.js
Miguel
Miguel

Reputation: 787

Params not being passed throug router link on Vuejs

I am trying to pass properties to a component through a router-link on Vuejs, but the component is not recieving them properly. I have a main menu and a secondary menu, which is where I want to pass the properties, when a main menu button is clicked:

const Sidebar = {
  name:'sidebar',
  template:`
  <div>
    Sidemenu
    <router-link  v-for="route in routes" v-key="route" :to="route">{{route}}</router-link>
  </div>`,
  props: {
    routes:{
      type: Array,
      required: true,
      default: function(){return []}
    }
  }
}

const AppMenu = {
  name:'app-menu',
  template:`
    <div>
      <router-link :to="{name:'project', params:{routes: projectMenus}}">Project</router-link>
      <router-link :to="{name:'assets', params:{routes: assetsMenus}}">Assets</router-link>
    </div>`,
  data: function(){
    return{
      projectMenus: ['overview', 'settings'],
      assetsMenus: ['landscapes', 'characters']
    }
  }
}

const App = {
  template:`
    <div>
      <app-menu/>
      <router-view name="sideview"/>
      <router-view name="sectionview"/>
    </div>`,
  components:{AppMenu}
};


const Routes= [
    {path: '/', name:'home', redirect: 'project'},
    {path:'/project', name:'project', components:{sideview:Sidebar}, props:{sideview:true}},
    {path:'/assets', name:'assets', components:{sideview:Sidebar}, props:{sideview:true}}
]

The Sidebar component is rendering, because I can see "Sidemenu" on the page, but the console throws [Vue warn]: Missing required prop: "routes" on Sidebar, so my submenu links are not shown. I've searched on the docs, and many similar issues in many forums, but I can't find what I'm doing wrong.

Upvotes: 0

Views: 1326

Answers (1)

Flame
Flame

Reputation: 7561

When you make props an object in the vue routes definitions, it will replace the components props. You are setting them as {sideview: true} which overrides all props in your Sidebar component.

At least that is my understanding from https://router.vuejs.org/guide/essentials/passing-props.html#object-mode

Upvotes: 1

Related Questions