制作导航记录功能

1、将该部分封装成一个组件引入到展示首页里

结构.

  <div class="tags" v-if="showTags">
    <ul>
      <li
        class="tags-li"
        v-for="(item, index) in tagsList"
        :class="{ active: isActive(item.path) }"
        :key="index"
      >
        <router-link :to="item.path" class="tags-li-title">{
   {
   
          item.title
        }}</router-link>
        <span class="tags-li-icon" @click="closeTags(index)">
          <i class="el-icon-close"></i>
        </span>
      </li>
    </ul>
  </div>

样式.

.tags-li.active {
   
  border: 1px solid #409eff;
  background-color: #409eff;
}
.tags {
   
  position: relative;
  height: 50px;
  padding-top: 5px;
  overflow: hidden;
  /* background: #fff; */
  background: #233645;
  padding-right: 120px;
  box-shadow: 0 5px 10px #ddd;
}

.tags ul {
   
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-left: 25px;
}

.tags-li {
   
  float: left;
  margin: