效果

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

一、路由配置

代码如下：

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：

代码如下：

<template><div class="Bread"><el-breadcrumb separator="/"><!-- to为点击跳转 title为路由中的meta属性定义的标题 --><el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="item.meta.path">{{ item.meta.title }}</el-breadcrumb-item></el-breadcrumb></div>
</template><script>
export default {data() {return {breadList: [],};},watch: {$route() {//监听$routethis.getBreadcrumb();},},methods: {isHome(route) {return route.name === "home";},getBreadcrumb() {let matched = this.$route.matched;//如果不是首页if (!this.isHome(matched[0])) {matched = [].concat(matched);}this.breadList = matched;},},created() {//生命周期中调用获取数据的方法this.getBreadcrumb();},
};
</script><style>
.Bread{height: 30px;float: left;
}
</style>

2.在页面中使用

代码如下：

<!-- 头部 -->
<template><div id="app"><div class="header"><h1>欢迎使用My-Vue-Admin!</h1><div class="full-screen"><Avatar></Avatar><FullScroll></FullScroll></div></div><div class="Bread"><BreadVue></BreadVue></div></div>
</template><script>
// 导入ScreenFull组件，控制全屏
import FullScroll from '@/components/Header/ScreenFull.vue'
// 导入头像组件
import Avatar from '@/components/Header/AvatarHeader.vue'
// 导入面包屑
import BreadVue from '../components/Bread.vue'
export default {components: {FullScroll,Avatar,BreadVue},data(){return{breadList:null,}},
}
</script><style lang="less" scoped>
#app {background-color: #ffffff;margin: 0;padding: 0 0 18px 0px;box-shadow: 0px 0px 8px 1px #e6e6e6;overflow: hidden;
}
.header h1 {margin-bottom: 5px;height: 50px;float: left;margin-left: 40px;
}
.header {text-align: left;overflow: hidden;text-align: right;box-shadow: 0px 0px 5px 0px #e6e6e6;
}
.header i {float: right;
}
#app h1 {margin-top: 0;
}
.full-screen:before {display: flex;overflow: hidden;padding-top: 20px;
}
/deep/.el-breadcrumb {margin: 20px 0 0 40px;
}
</style>

总结

文件目录

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

vue + Element UI 动态Breadcrumb 面包屑的制作相关推荐

VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Vue elementUI中的Breadcrumb面包屑
目录一.前言二.组件使用三.总结一.前言面包屑用于显示当前页面的路径,快速返回之前的任意页面. 例如: 二.组件使用 elementUI官网的实例十分简单,并没有配合路由来创建面包屑. 但是 ...
element实现动态路由+面包屑
要掌握:localStorage,组件封装 emm,第一次上传视频转gif的图片,效果不咋好... 视频转gif 的软件连接 http://www.zxt2007.com/downloads ...
Vue + ElementUI 动态生成面包屑导航教程
在Web应用程序中,面包屑导航是一种常用的导航方式,它可以帮助用户更好地理解当前页面的位置和层次关系.在Vue项目中,结合ElementUI组件库,我们可以很容易地实现一个动态生成面包屑导航的功能.本 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

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

文章目录

效果

一、路由配置

二、使用步骤

1.Breadcrumb.vue：

2.在页面中使用

总结

vue + Element UI 动态Breadcrumb 面包屑的制作相关推荐

最新文章

热门文章