面包屑路径效果-基于lementUI

今天用vue+elementui做了一个面包屑导航, 记录一下实现的步骤

写在前面:

在vue路由中, $route代表的是路由信息对象, $router代表的是路由实例对象

在路由信息对象中有一个属性加matched, 里面匹配了当前页面的路由信息(是根据你的路由配置生成的), 其中有一个属性叫path(代表了当前页面的路径), 还有一个属性叫meta,是一个空对象,代表的是元信息, 因此可以在里面添加自己需要的属性

下面是实现的步骤:

第一步: html代码-基于ElementUI

<!-- 面包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item        // 使用v-for循环面包屑的每一项
        v-for="v in breaks"
        :key="v.title"
        :to="{ path: v.to }"
        >{
   
   { v.title }}
    </el-breadcrumb-item>
</el-breadcrumb>

第二步: 定义循环的数组

// 数据
data() {
    return {
        breaks: [],    // 定义一个空数组,后续通过函数计算出这个数组的数据
                       // 数组是一个对象数组,包含当前页路径和姓名
                       // 我们想要的数据格式:[{ to: '/path', title: '页面名称' }]
    };
},

第三步: 配置路由在router->index.js中配置meta

const routes = [
  // 根目录重定向到登录页面
  { path: '/', redirect: '/login' },
  // { path: '/', component: Home },

  // 登录
  { path: '/login', component: Login },

  // 后台主页
  {
    path: '/home',
    component: Layout,
    meta: { title: "后台主页" },    // meta对象原本是一个空数组.现在由于我们需要当前页的页面名
                                   //称(用于做面包屑),所以往这个对象中添加了title属性代表当
                                   //前页页面名, 当个页面只需要写在父路由配置中meta
    children: [
      { path: '', component: Home }
    ]
  },

  // 商品管理
  {
    path: '/goods',
    component: Layout,
    redirect: '/goods/list',
    meta: { title: "商品管理" },       // 多个页面需要在父路由和子路由中同时配置meta
    children: [
        // 多个页面需要在父路由和子路由中同时配置
      { path: '/goods/list', component: GoodsList, meta: { title: "商品列表" }, },    
      { path: '/goods/add', component: GoodsAdd, meta: { title: "商品添加" }, },
      { path: '/goods/category', component: GoodsCategory, meta: { title: "商品分类" }, },
    ]
  },
]

第四步: 计算breaks的值

//方法
  methods: {
    // 计算面包屑路径
    calcBreaks() {
      // 定义一个数组里面包含了首页的信息,首页是固定项
      let temp = [{ to: "/home", title: "首页" }];    
      let r = this.$route.matched // $route.matched代表的是当前页面匹配的路由信息,是一个对象数组
        .filter((v) => v.meta.title) // 过滤每一项的meta对象中包含title属性的元素,并装入一个新数组
        .map((v) => {    // 循环过滤后的数组
          return { to: v.path, title: v.meta.title }; // 返回对象,并装入一个新数组,数组里面就是每一次的返回值
        });

      this.breaks = [...temp, ...r];    // 给数据中的breaks赋值(使用es6的扩展运算符合并数组)
    },
  },

第五步: 在生命周期钩子函数created中调用计算路径的函数

// 生命周期, 这个周期可以获取到data中的数据,所以写在这里面
  created() {
    // 执行计算面包屑路径函数
    this.calcBreaks();
  },

第六步: 由于生命周期中的调用只能在页面刷新后才会调用函数, 不能在页面切换时就调用计算函数,不能实现我们预期的效果, 所以需要在侦听器中再次调用

// 监听器
  watch: {
    // 监听路由信息对象中的path属性
    "$route.path"() {
      this.calcBreaks(); // 当path发生变化的时候执行关联操作调用计算函数
    },
  },