使用 vue-router 嵌套子路由答案

【问题标题】：Nested subroutes using vue-router使用 vue-router 嵌套子路由
【发布时间】：2015-12-29 13:43:01
【问题描述】：

我正在使用 Vue.js 和 Vue-router。我正在尝试创建一个组件列表，每个组件都显示一个子路由。

我正在尝试做的示例：

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

我只能让嵌套子路由出现在第一个组件中。我在 v-for 循环中渲染的其余组件没有出现子路由。

这是我的代码，显示问题：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')

【问题讨论】：

标签： vue.js

【解决方案1】：

在另一个内部只能有一个嵌套且相同的router-view。没办法。对于不同的路由，可以有多个 router-view 实例。

你可以这样做：

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

【讨论】：

谢谢。不是我所希望的，但我很感激。