在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何在iview的tab組件中設(shè)置路由出口？

如何在iview的tab組件中設(shè)置路由出口？

想要在iview的每一頁tab中顯示一個vue組件，并且tab是動態(tài)渲染（類似瀏覽器窗口新標簽頁的形式，但是在單頁面應(yīng)用中），應(yīng)該怎樣做呢？

    <div>
      <Tabs type="card" closable @on-tab-remove="tabRemove" v-model="activeIndex" 
      @tab-click="tabClick" v-if="options.length">
        <TabPane v-for="(item, index) in options" :key="item.name" :label="item.name" 
         :name="item.route"></TabPane>
      </Tabs>
    </div>
回答
編輯回答
九年囚

空tabpane，把router-view放在外面

<Tabs type="card" 
      closable 
      @on-tab-remove="tabRemove" 
      v-model="activeIndex"
      @tab-click="tabClick"
      v-if="options.length">
        <TabPane v-for="(item, index) in options" 
                 :key="item.name" 
                 :label="item.name" 
                 :name="item.route">
        </TabPane>
</Tabs>
<router-view></router-view>
...
tabClick(name){
    this.$router.push(name)
}

動態(tài)組件了解一下

<Tabs type="card" 
      closable 
      @on-tab-remove="tabRemove" 
      v-model="activeIndex"
      @tab-click="tabClick"
      v-if="options.length">
        <TabPane v-for="(item, index) in options" 
                 :key="item.name" 
                 :label="item.name" 
                 :name="item.route">
           <component :is="componentName"></component>
        </TabPane>
</Tabs>
...
import componentName form 'xxxx.vue'
2017年2月13日 09:31