Nested subroutes using vue-router

Question

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')

notANerdDev · Accepted Answer · 2015-12-29 15:14:11Z

1

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>

answered Dec 29, 2015 at 15:14

notANerdDev

1,28611 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

retrograde Over a year ago

Thanks. Not what I was hoping for, but I appreciate it.

Collectives™ on Stack Overflow

Nested subroutes using vue-router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related