Question

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

我想做的例子：

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

Answer 1

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

你可以做的是这样的事情：

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

使用vue-router的嵌套子路由

1 个答案: