先看看效果图
在做项目的时候，一般都需要这样的导航，可以无限的添加导航
仔细看看这个导航，只有一级导航是浮动的，然后二级，三级，四级...都是在下面横着排列过去的；
我做这个的时候是先在纸上画了个图(毕竟本人比较菜)，然后先把布局做出来；
先来说说怎么做布局的吧；看看我的静态页面的结构
<ul class="list">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">动态</a>
</li>
<li>
<a href="#">一级菜单</a>
<ul class="subItem">
<li>
<a href="#">二级菜单-1</a>
<ul class="subItem">
<li>
<a href="#">三级菜单-1</a>
<ul class="subItem">
<li>
<a href="#">四级菜单</a>
<ul class="subItem">
<li>
<a href="#">五级菜单</a>
</li>
<li>
<a href="#">五级菜单</a>
</li>
<li>
<a href="#">五级菜单</a>
</li>
<li>
<a href="#">五级菜单</a>
</li>
</ul>
</li>
<li>
<a href="#">四级菜单</a>
</li>
<li>
<a href="#">四级菜单</a>
</li>
<li>
<a href="#">四级菜单</a>
</li>
<li>
<a href="#">四级菜单</a>
</li>
<li>
<a href="#">四级菜单</a>
</li>
<li>
<a href="#">四级菜单</a>
</li>
</ul>
</li>
<li>
<a href="#">三级菜单-2</a>
<ul class="subItem">
<li>
<a href="#">四级菜单----</a>
</li>
<li>
<a href="#">四级菜单----</a>
</li>
<li>
<a href="#">四级菜单----</a>
</li>
<li>
<a href="#">四级菜单----</a>
</li>
</ul>
</li>
<li>
<a href="#">三级菜单-3</a>
</li>
<li>
<a href="#">三级菜单-4</a>
</li>
</ul>
</li>
<li>
<a href="#">二级菜单-2</a>
</li>
<li>
<a href="#">二级菜单-3</a>
</li>
<li>
<a href="#">二级菜单-4</a>
</li>
</ul>
</li>
</ul>
之所以写的这么长，就是想看看最终的效果，其实它的基本结构就是
<ul>
<li>
<a href="">×××××</a>
</li>
</ul>
然后要嵌套下一级的时候，就在a标签下就再复制一个这样的基本结构;
然后我来看看样式应该怎么去写
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
.list{
width: 1200px;
height: 45px;
margin: 0 auto;
background-color: #000;
}
.list a{
color: #fff;
text-decoration: none;
}
.list>li{//一级目录的样式，需要浮动排列在一起
float: left;
}
.list li{
position: relative;
line-height: 45px;
text-align: center;
width: 200px;
height: 45px;
}
.list li.active{//鼠标移入的时候的样式
background-color: red;
}
//二级标签的定位必须是这样的，不能改
.list>li>.subItem{
left: 0;
top: 45px !important;
}
.list li .subItem{
position: absolute;
background-color: #333;
}
.list li .subItem .subItem{//这个是三级目录，和三级以后的目录的定位，这个top值是要需要动态修改的(其实不改也是可以的，就看你自己想要什么效果了)
top: 0;
left: 200px;
}
以上把布局写出来了，然后就考虑如何做成组件，这个明显是需要用到递归的，做着组件的时候，其实我由两部分组件组成的
先看看核心组件:
<template>
<li @mouseenter="showFn" @mouseleave="hideFn" :class="{active:isShow}">
<a href="#">{{datas.text}}</a>
<ul class="subItem" v-if="isChildern" :style="{top: -index*45+'px'}" v-show="isShow">
<base-nav :datas="item" :index="index" v-for="item,index in datas.children" :key="index"></base-nav>
</ul>
</li>
</template>
<script>
export default {
name: "base-nav",
props: ["datas","index"],
data () {
return {
isShow: false
}
},
computed: {
//是否存在子级
isChildern () {
return this.datas.children && this.datas.children.length
}
},
created () {
},
methods: {
showFn () {
this.isShow = true
},
hideFn () {
this.isShow = false
}
}
}
</script>
首先注意：这里的name必须存在（看别人是这么说的），因为需要拿来引用自己，
:style="{top: -index*45+'px'}"这个其实无所谓的，看自己想要的效果，我是希望2,3,4...级都是对齐的，所以就这么写
然后是外层组件：
<template>
<div class="header-bar">
<ul class="list">
<base-nav :datas="item" :index="index" v-for="item,index in lists" :key="index"></base-nav>
</ul>
</div>
</template>
<script>
import baseNav from './base-nav'
export default {
props: ["lists"],
components: {
baseNav
}
}
</script>
<style>
@import "../assets/css/header-bar.css";
</style>
最后我们其实是引入的这个组件
例如：
import headerBar from '@/components/header-bar'
<header-bar :lists="lists"></header-bar>
var lists = [ { text: '一级-1', children: [ { text: '二级1-1', children: [ { text: '三级1-1-1', children: [ { text: '四级1-1-1' } ] }, { text: '三级1-1-2', children: [] }, { text: '三级1-1-3', children: [] } ] }, { text: '二级1-2', children: [ { text: '三级1-2-1', children: [] }, { text: '三级1-2-2', children: [] }, { text: '三级1-2-3', children: [] } ] }, { text: '二级1-3', children: [] }, { text: '二级1-4', children: [] } ] }, { text: '一级-2', children: [ { text: '二级-2-1', children: [ { text: '三级-2-1-1', children: [] } ] }, { text: '二级-2-2', children: [] }, { text: '二级-2-3', children: [] }, { text: '二级-2-3', children: [] }, ] }, { text: '一级-3', children: [] } ]