用 vue封装一个自己的头部导航栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

例如：随着业务功能模块的增加，动态导航栏的封住就显得格外中要。

---

一、明确需求

（1）希望导航栏能够动态改变随着后台的控制
（2）能够有作为导航栏该有的基础样式
（3）能够跳转

二、代码实现

<template>
  <div class="content">
 	 //放置头部导航logo
      <div class="img">
		<img src='../logo.png'>
	  </div>
	  //导航模块
      <div class="option">
      //通过v-for循环遍历 barList
        <el-link type="info" class="a" :underline="false"
          v-for="(bar,index) in barList" :key="index" 
          :class="{'lineShow': bar.barName == showName}" 
          @click="showName = bar.barName"
          >{{ bar.barName }}
        </el-link>
        <span class="a" style="color: #909399;">|</span>
        <el-link class="a" :underline="false"  type="info"
          :class="{'lineShow': '登录' == showName}" @click="showName = '登录'"
          >登录
        </el-link>
      </div>
  </div>
</template>

<script>

export default{
  data() {
      return {
        value1:true,
        showName:'登录',
        activeIndex: '1',
        activeIndex2: '1',
        barList:[
          {
            barName:'主页',
            routerLink:'/index'
          },
          {
            barName:'职位',
            routerLink:'/job'
          },
          {
            barName:'社会服务',
            routerLink:'/social'
          },
          {
            barName:'地方招聘',
            routerLink:'/findWork'
          }
        ]
      };
    }
}
</script>

<style lang="less" scoped>
*{
  padding: 0;
  margin: 0;
}
a{
  text-decoration:none;
  outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
	// color: #ffffff;	/* 去除默认的颜色和点击后变化的颜色 */ 
}
.content{
  height: 40px;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  >.option{
    flex: 1;
    line-height: 50px;
    // display: flex;
    .a{
      height: 40px;
      margin-left: 8%;
      font-size: 14px;
      font-weight: 600;
      // color: rgb(122, 122, 122);
    }
  }

  .lineShow{
    border-bottom: 2px solid #409EFF;
    color: #409EFF;
  }
  >.img{
    flex: 1;
  }
}
</style>

总结

使用for循环遍历barList(可从后台请求)
通过点击实现对应模块的字体高亮以及下划线