Vue 导航条+滑块效果

前言

    总结一个最近开发的需求。设计稿里面有一个置顶的导航条，要求在激活的项目下面展示个下划线。我最先开始尝试的是使用 after 的伪类选择器，直接效果一样，但是展示的时候就会闪现变化，感觉不够自然，参考了一下其他网站的设计，最终选择将下划线改成一个可以随着导航项内容长度自动变换的div，并添加了滑块效果。

代码效果展示

    为了图方便，我就写了主页和欢迎语两个路由内的内容，其他都页面都没写，不过效果倒是不影响。

导航实现代码

导航实现代码

    这里的导航条内容封装在Header内容中

<template>
    <div class="header-container">
      <!-- 导航内容 -->
      <ul class="navigate-box">
        <li class="navigate-item" v-for="(item,key) in navList" :key="key" @click=" navHoverID = item.id ">
          <router-link v-if="item.path" :to="item.path">{
  {item.name}}</router-link>
          <!-- 因为这里的页面3-页面5具体路由组件没有填写，这里为了导航项滑块效果，就先用span代替一下
          -->
          <span class="item" v-else>{
  {item.name}}</span>
        </li>
        <div class="trigger disabled" :style="slider()"></div>
      </ul>
    </div>
</template>

<script>
export default {
     
    name: 'Header',
    data() {
     
      return{
     
          navList:[
            {
     id:0, name: "主页", path: "/homepage"}