前言

    总结一个最近开发的需求。设计稿里面有一个置顶的导航条，要求在激活的项目下面展示个下划线。我最先开始尝试的是使用 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"}