CODEWITHSUNDEEP
vue.js
retrograde
retrograde

Reputation: 2979

Nested subroutes using vue-router

Im using Vue.js with Vue-router. I'm trying to create a list of components, each of which shows a subroute.

Example of What I am trying to do: 

<ul>
  <li>first
     <ul><li>nested sub</li></ul>
  </li>
  <li>second
     <ul><li>nested sub</li></ul>
  </li>
  <li>third
     <ul><li>nested sub</li></ul>
  </li>
</ul>

I am only able to get the nested subroute to appear in the first component. The rest of my components rendered in the v-for loop have no subroutes appearing.

Here is a fiddle of my code, showing the problem: https://jsfiddle.net/retrogradeMT/73zza1ah/

HTML:

<div id="page-content">
     <router-view></router-view> <!-- renders campaign block list -->
 </div>

 <template id="campaignBlock" >
   <ul>
     <li v-for="campaign in campaigns">{{ campaign.name }} 
       <router-view> </router-view>  <!-- should show subroute -->
     </li>
   </ul>
  </template>

  <template id="subroute">
    <ul>
     <li>Nested View</li>
    </ul>
  </template>

JS:

Vue.use(VueRouter)

Vue.component('app-page', {
  template: '#campaignBlock',

  data: function() {
    return{
        campaigns: []
    }
  },

ready: function () {
    this.fetchCampaigns();
},

methods: {

    fetchCampaigns: function(){
        var campaigns = [
          {
            id: 1,
            name: 'First List item'
          },
          {
            id: 2,
            name: 'Second List item'
          },
          {
            id: 3,
            name: 'Third List item'
          },
        ];

    this.$set('campaigns', campaigns);
    }
  }
})

Vue.component('subroute', {
  template: '#subroute'
})


var App = Vue.extend({})

var router = new VueRouter()

router.map({
'/': {
    component: Vue.component('app-page'),

    subRoutes: {
          '/': {
            component: Vue.component('subroute')
          },   
       }
    }
 })

router.start(App, '#page-content')

Upvotes: 1

Views: 1349

Answers (1)

notANerdDev
notANerdDev

Reputation: 1286

There can only be one single nested and identical router-view inside another. No way around it. For different routes, you can have multiple instances of router-view.

What you can do is something like this:

<li v-for="campaign in campaigns">{{ campaign.name }} 
    <subroute></subroute>
</li>

Upvotes: 1

Related Questions