CODEWITHSUNDEEP
javascriptvue.jsvue-router
codebot
codebot

Reputation: 697

Dynamic Vue routes with one router component and one menu

In my Vue project, I want to have nested routes in my router.js and just one menu for all the nested routes and also one <router-view></router-view> in a master component

So I want this (pseudocode)

<master>

  <menu>
  </menu>

  <router-view>    
  </router-view>

</master>

In my router.js I have

{ 
  path: '/master',
  name: 'master',
  component: Master,
  children:[
    {
      path: ':team',
      name: 'team',
      component: Team,
      children:[
        {
          path: ':group',
          name: 'group',
          component: Group,
          children:[
            {path: ':one',
            name: 'one',
            component: One}
          ]
        }
      ]
    }
  ]
}

and in my Master.vue , I have

<template>
  <div>

        <router-link class="link" :to="{name:'team', params: {team: 'ta'}}">team a</router-link> 
        <router-link class="link" :to="{name:'team', params: {team: 'tb'}}">team b</router-link> 
        <router-link class="link" :to="{name:'group', params: {group: 'ga'}}">group a</router-link> 
        <router-link class="link" :to="{name:'group', params: {group: 'gb'}}">group b</router-link> 
        <router-link class="link" :to="{name:'one', params: {one: 'oa'}}">one a</router-link>  
        <router-link class="link" :to="{name:'one', params: {one: 'ob'}}">one b</router-link>    

      <router-view></router-view>
  </div>
</template>

<script>   
    export default {
        name: "Master"
    }
</script>

This does not work as expected. If I click to team b and then go to a group, the url becomes ta/ga and it should be tb/ga.

EDIT, Also I am getting these warnings

[vue-router] Duplicate named routes definition: { name: "team", path: "/master/:team" }
[vue-router] Duplicate named routes definition: { name: "group", path: "/master/:team/:group" }
[vue-router] Duplicate named routes definition: { name: "one", path: "/master/:team/:group/:one" }
[vue-router] Duplicate named routes definition: { name: "master", path: "/master" }
[vue-router] missing param for named route "group": Expected "team" to be defined
[vue-router] missing param for named route "one": Expected "team" to be defined

I could remove the nested routes , but then all my routes would look like path: ':team/:group/:one' that I dont know if its right and its not very elegant.

How can I have the best of both worlds? Nested routes and one menu/one router? Is it possible?

Thanks

Upvotes: 0

Views: 277

Answers (1)

Celso Wellington
Celso Wellington

Reputation: 889

you must add the team params in case of groups, if you click on TEAM B you send one param (TB), then if you click on GROUP A, you send only the param GA, while discarding the information you provided 'TB'. Solution: you can use $route.params.id inside a nested router link that only appears when you select a team, then you can do like this:

 <router-link class="link" :to="{name:'group', params: {group: 'ga', team: $route.params.team}}">group a</router-link> 
        <router-link class="link" :to="{name:'group', params: {group: 'gb', $route.params.team}}">group b</router-link>

Also you can add this to your code and only activate the group links when the user inputs the team (must click in one team first so they can click in a group)

Upvotes: 1

Related Questions