（3）vue基于el-tabs实现路由选项卡组件封装

完成效果

创建tabs组件

新建Tabs.vue

// Tabs.vue
<script>
export default {
   
  name: 'Tabs',
  render() {
   
    return (
      <div class="l_Tabs_wrap">
        <el-tabs type="card" >
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    	  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </div>
    )
  }
}
</script>
<style lang="less" scoped>
.l_Tabs_wrap{
   
  height: 40px;
  position: absolute;
  left: 64px;
  right: 10px;
  bottom: 0px;
}
</style>

header内引用组件查看

根据路由数据渲染标签

将每次选中的页面路径存储到vuex内给tabs使用

//sideMenu > index.vue
// 监视路由发生改变将改变后的路由数据存储到vuex内
watch: {
   
    $route(key){
   
      let data = {
   
          path: key.fullPath,
          keepAlive: key.meta.keepAlive,
          title: key.meta.title
        }
      this.$store