Vue中使用ElementUI实现面包屑导航

很多时候我们都会看到图片中的效果,我们点击相关导航,在顶部就会显示相关路径,我们将这个功能称之为面包屑

刚好最近也是学到了实现这个功能的相关步骤,记录分享给大家,大家如果有更简单的方案,希望能分享分享.

第一步:

使用Breadcrumbs组件

Vue中使用ElementUI实现面包屑导航

复制相关代码粘贴到我们想实现面包屑的地方

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

第二步:

修改相关代码实现与左边导航实现联动

1. 修改路由

在路由中添加meta属性,以对象方式添加一个title,用于存放该路由的名称,这样当我们进行相关点击或者其他事件的时候就能通过一些方法来获取这个路由的名称,在面包屑这一块也就能实现获取当前路由名称从而渲染到面包屑上面去.

{
    path: "/goods",
    component: () => import("../views/index/Layout.vue"),
    redirect: "/goods/list",
    meta: { title: "商品管理" },
    children: [
        {
            path: "/goods/list",
            meta: { title: "商品列表" },
            component: () => import("../views/goods/GoodsList.vue"),
        },
        {
            path: "/goods/add",
            meta: { title: "添加商品" },
            component: () => import("../views/goods/GoodsAdd.vue"),
        },
        {
            path: "/goods/category",
            meta: { title: "商品分类" },
            component: () => import("../views/goods/GoodsCategory.vue"),
        },
    ],
},

2.修改Breadcrumbs组件代码

我们复制过来的代码是将面包屑写死了,我们要实现联动肯定要对代码进行相关修改.

A. 首先定义一个空数组,用于存放我们获取到的面包屑数据

    data() {
        return {
            // 面包屑数据
            menuArr: [],
        };
    },

B. 修改Breadcrumbs组件代码,因为第一个首页是固定的我们可以将其写死,剩下的就就是从我们定义的空数组里获取.

<el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item to="/index">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(v, i) in menuArr" :to="v.path" :key="i">{{
        v.name
    }}</el-breadcrumb-item>
</el-breadcrumb>

3.渲染面包屑

完成前面的步骤,我们就可以写方法进行渲染数据了,我们之前已经在路由中设置 meta 对象，为面包屑添加导航名称,我们只需获取到这个名称,放到我们在data中定义的数组中去,在页面刷新时调用一次这个方法与监听到路由改变时调用一次.就可以实现面包屑联动功能了.

//渲染面包屑导航
render(){
  //筛选出有meta属性的路由
  let arr=this.$route.matched.filter(v=>{
    return v.meta.title
  });

  this.menuArr=arr.map(v=>{
    return {name:v.meta.title, path:v.path}
  });
}

//刷新页面时调用一次
created(){
  this.render();
},

//监听到路由改变时调用一次
watch:{
    "$route.path"(v){
      this.render();
    }
}