vue中面包屑的封装

面包屑是一种常见的导航工具，通常出现在网页内容的上方。面包屑小巧，简单，网站面包屑作为一种辅助导航工具，作用是告诉访问者他们目前在网站中的位置以及如何返回，提高用户的体验。面包屑的作用作为一种辅助导...

面包屑是一种常见的导航工具，通常出现在网页内容的上方。面包屑小巧，简单，网站面包屑作为一种辅助导航工具，作用是告诉访问者他们目前在网站中的位置以及如何返回，提高用户的体验。

面包屑的作用

• 作为一种辅助导航工具，面包屑为用户呈现出网页的结构层次，让用户知道自己目前所处的位置以及自己还能到哪里去。
• 面包屑鼓励用户浏览更多的内容，提升了整个网站的可访问性，降低网站的跳出率。
• 利于搜索引擎蜘蛛对网站的抓取，实现网页SEO优化。

面包屑的类型

• 基于位置的面包屑：基于位置的面包屑能很好的反映网站的结构特征，能将网站的层级结构展现在访客面前，对于通过外部链接或搜索引擎进入页面的游客具有清晰的指引性作用。

• 基于路径的面包屑：基于路径的面包屑即历史足迹，它所反映的不是网站的结构特征，而是游客的完整访问路径。此类面包屑动态生成，帮助游客记录浏览的历史足迹。

• 基于属性的面包屑：基于属性的面包屑常见于电子商务类网站。产品根据类别和属性的不同而归于不同的目录之中，基于属性的面包屑使用户更容易理解产品和产品之间的关系。

vue中面包屑的封装

下面借用element-ui和vue为大家简单实现一个面包屑的封装。

• 先创建一个bread.vue组件作为封装的公共组件
• 使用element-ui中的面包屑做一个初始化结构
  • 对el-breadcrumb不了解的可以来这里：element–面包屑

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

• 这个时候一个基础面包屑样式就出来了，但要想实现活的封装，还需要我们借助router.js来实现

{
        path: "/users",
        component: Users,
        meta: {
          bread: ["用户管理", "用户列表"]
        }
      },

在路由里面使用meta来存放面包屑数据，以便后期提取使用

//bread.vue
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/wel' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item,index) in list" :key="index">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
        list:[]
    };
  },
  mounted() {
      this.list = this.$route.meta.bread
  },
};
</script>

<style scoped>
</style>

在要使用面包屑的组件中直接调用封装好的bread组件即可

<template>
  <div>
    <!-- 面包屑导航 -->
    <bread></bread>
  </div>
</template>

<script>
import bread from "../bread";   // <--组件位置
export default {
components: { bread },
  data() {
    return {    
    };
  },
  mounted() {
      
  },
};
</script>

<style scoped>
</style>