如何在iview的tab组件中设置路由出口？

Question

想要在iview的每一页tab中显示一个vue组件，并且tab是动态渲染（类似浏览器窗口新标签页的形式，但是在单页面应用中），应该怎样做呢？

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

Answer 1

空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)
}

动态组件了解一下

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