vue + Element UI 动态Breadcrumb 面包屑的制作

paranoid lv.1

发布时间：2023-04-29 18:02:27 305

效果

vue + Element UI 动态Breadcrumb 面包屑的制作_Vue

面包屑用于显示当前页面的路径，快速返回之前的任意页面。

一、路由配置

代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

const routes = [
  { 
    path: '/', 
    component: ()=>import("@/views/LoginView") 
  },
  { 
    path: '/login', 
    name: "login",
    component: ()=>import("@/views/LoginView"),
  },
  {
    path: '/home',
    name:"home",
    component: ()=>import("@/views/HomeView"),
    meta:{
      title:'首页',
      path:"/home"
    },
    children: [
      { //主页
        path: '/home', 
        component: ()=>import("@/views/main/MainView"),
        meta:{
          title:'',
          path:"/home"
        }
      }, 
      { //个人信息
        path: 'userinfo', 
        component: ()=>import("@/views/userinfo/UserInfo"), 
        meta:{
          title:'个人中心',
          path:"/userinfo"
        }
      },  
      { //分析页
        path: 'analyse', 
        component: ()=>import("@/views/Analyse"),
        meta:{
          title:'分析页',
          path:"/analyse"
        }
      },  
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

这里使用了router的meta属性，为其设置名为title的属性，用来当作面包屑的展示名称，当然，也可以直接使用路由的name属性。

二、使用步骤

1.Breadcrumb.vue：

代码如下：

2.在页面中使用

代码如下：

总结

文件目录

vue + Element UI 动态Breadcrumb 面包屑的制作_路由配置_02

vue-router和breadcrumb面包屑结合，实现展示当前路径下的路由信息。关键是利用route对象的matched属性，得到前匹配的路径中所包含的所有片段所对应的配置参数对象数组，然后遍历数组，并利用数组中对象的信息，展示到面包屑中。每个对象的path属性为其对应的路由路径，meta属性为其元数据对象。

vue + Element UI 动态Breadcrumb 面包屑的制作_路由配置_03