【Element-UI笔记】使用面包屑（breadcrumb）来导航

什么是面包屑导航

一般页面内容上方都会有一个路径导航，这个导航就是面包屑导航。例如：

上面这个图表示我们当前的页面是Breadcrumb面包屑，上一级目录是组件页面，再上一级目录是Element UI页面。当我们点击这些目录时会返回到对应的页面中去。再例如：

上面这个图表示我们当前所在的位置是活动详情页面，上一级目录是活动列表页面…以此类推。
这些就是面包屑导航。

Element-UI如何实现面包屑导航

我们以实现下面这个面包屑导航为例：

上面这个导航包括当前页面二级目录，上一级页面一级目录和根页面首页。上面这个导航的代码可以表示为：

<div class="crumbs">
   <el-breadcrumb separator="/">
       <el-breadcrumb-item :to="{path:'/main/home'}">首页</el-breadcrumb-item>
       <el-breadcrumb-item><a href="/main/dir1">一级目录</a></el-breadcrumb-item>
       <el-breadcrumb-item>人员管理</el-breadcrumb-item>
   </el-breadcrumb>
</div>

首先我们将这个导航用一个div模块包裹起来，保持它的独立性和模块性。这个div模块的style类型就是"crumbs"，是面包屑导航自有的style类型，不用自己写。

然后将所有路径使用<el-breadcrumb>包裹起来。separator='/'separator属性的值是一个字符串，默认是斜杠’/’，这个separator就是将我们的路径分开的符号，当然我们也可以使用">", "//"之类的符号。

添加导航路由有两种方式：
一种方式是在el-breadcrumb-item中直接添加路由：to:{path:'/main/home'}
另一种方式是在el-breadcrumb-item添加链接<a href="/"></a>