面包屑效果（element + vue）

前言：最近在写一个基于element + vue 技术的pc端外卖管理系统项目，其中主内容头部区域用到了面包屑的效果，面包屑的文字内容和点击文字跳转到对应得组件页面，要根据路由信息动态生成。在这里呢，将实现思路做个记录。

一、先来看看element上面的面包屑模板

<el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>  //这个to属性是我们在点击首页时会跳转到首页组件<el-breadcrumb-item>活动管理</el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

二、由于我们的面包屑是要动态获取数据生成，所以不能像上面那样写死，那这个时候我们需要两个变量，一个变量代表点击文字跳转对应组件的to属性，另一个代表显示的文字内容(title)，比如：首页、活动管理。

接下来就定义一个空对象数组


//我们要的对象数组的数据格式应该是下面这样,但是数组里面的内容是后面动态计算生成,所以先定义空数组
//breads:[
//    {to:'/account',title:'账号管理'},
//    {to:'/account/add',title:'账号添加'}
//]export default {data() {return {breads: [], //定义面包屑数组   }}
}

三、删除面包屑多余子项，用v-for遍历breads对象数组，动态生成面包屑子项

<el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-itemv-for="bread in breads":key="bread.title":to="bread.to"> //动态绑定点击跳转路径{{ bread.title }} //动态绑定文字内容</el-breadcrumb-item>
</el-breadcrumb>

四、接下来来了解一下路由信息对象(this.$route)下的matched对象数组，它包含当前路由的所有嵌套路径片段的路由记录，可以用它拿到当前路由的path，那to值就有了，而matched下面每个对象里都有一个meta属性，它是元信息，可以在里面添加我们需要的数据，那title就可以添加在里面

meta需要在项目目录router/index.js里面配置

//订单管理{path: '/order',component: Layout,meta: { title: '订单管理' }, //配置自己的metachildren: [{path: '',component: Order}]},//商品管理{path: '/goods',component: Layout,meta: { title: '商品管理' }, //配置自己metaredirect: '/goods/list',children: [{path: '/goods/list',component: GoodsList,meta: { title: '商品列表' } //配置子菜单的meta},{path: '/goods/add',component: GoodsAdd,meta: { title: '商品添加' } //配置子菜单的meta},{path: '/goods/category',component: GoodsCategory,meta: { title: '商品分类' } //配置子菜单的meta}]},

五、写计算面包屑的函数

 ----------------------------------------------------------------------------------------    // 配置后打印this.$route.matched//点击'订单管理'导航项(没有子菜单的页面)matched:[0:{path:'/order',xxx,...,meta{title:'订单管理'},xxx,...} //存放父导航项信息1:{path:'/order',xxx,...,meta{},xxx,...} //存放子导航项信息]//点击'账号添加'导航项(有子菜单的页面)matched:[0:{path:'/account',xxx,...,meta{title:'账号管理'},xxx,...} //存放父导航项信息1:{path:'/account/add',xxx,...,meta{title:'账号添加'},xxx,...} //存放子导航项信息]----------------------------------------------------------------------------------------实现的代码：methods:{//计算面包屑calcBreads() {//让每一页都可以跳转首页let temp = [{ to: "/home", title: "首页" }];let r = this.$route.matched.filter((v) => v.meta.title) //当点击的是没有子菜单的导航项时,过滤掉matched对象数组中的第二项.map((v) => {return { to: v.path, title: v.meta.title }; //提取path和title生成我们需要的数据格式});this.breads = [...temp, ...r];  //让面包屑以首页开头  => 首页 / 账号管理 / 账号添加}
},created() {//页面刷新时要调用计算面包屑函数this.calcBreads();
},

六、以上方法只有点击导航项时，重新刷新页面后面包屑才正确显示内容。直接点击切换导航项，面包屑的内容显示是不对的，那这个时候需要监听路由路径的变化，调用计算面包屑函数重新计算

 // 侦听器watch: {//页面不刷新的话面包屑的显示文字不会改变,所以要监听路由路径的值状态//监听到路由地址变了(点击菜单)也要调用计算面包屑的函数重新计算"$route.path"() {this.calcBreads();},},

七、当我们在当前组件页面连续点击当前面包屑导航，浏览器会有警告，在项目目录router/index.js重写路由的push就可以消除警告了

// 重写路由的push 解决跳转当前导航的警告
const originPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {return originPush.call(this, location).catch(err => err)
}

面包屑效果（element + vue）相关推荐

Vue项目之Element-UI(Breadcrumb)动态面包屑效果
效果面包屑作用面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级原始方式最笨的方法就是在每个需要面包屑的页面中固定写好 ...
vue-router 利用 $route 的 matched 属性实现面包屑效果
我们以一个固定的路由表来说明 let routes = [{path: '/',component: () => import('../pages/layout/Layout.vue'),chi ...
Vue + ElementUI 动态生成面包屑导航教程
在Web应用程序中,面包屑导航是一种常用的导航方式,它可以帮助用户更好地理解当前页面的位置和层次关系.在Vue项目中,结合ElementUI组件库,我们可以很容易地实现一个动态生成面包屑导航的功能.本 ...
Vue2面包屑（Breadcrumb）
Vue3面包屑(Breadcrumb) 可自定义设置以下属性: router的路由数组(routes),必传,默认为[] 面包屑高度(height),默认60px 自定义分隔符(separator), ...
Vue3面包屑（Breadcrumb）
Vue2面包屑(Breadcrumb) 可自定义设置以下属性: router 的路由数组(routes),必传,类型:Array<{path: string, query?: object, n ...
thinkphp 面包屑导航
如何实现以下面包屑效果呢控制器层 <?php namespace Home\Controller; use Think\Controller; class GoodsController ex ...
vue + Element UI 动态Breadcrumb 面包屑的制作
文章目录效果一.路由配置二.使用步骤 1.Breadcrumb.vue: 2.在页面中使用总结效果面包屑用于显示当前页面的路径,快速返回之前的任意页面. 一.路由配置代码如下: impo ...
Vue+Element项目实战系列-动态面包屑
面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 ...
element实现动态路由+面包屑
要掌握:localStorage,组件封装 emm,第一次上传视频转gif的图片,效果不咋好... 视频转gif 的软件连接 http://www.zxt2007.com/downloads ...

面包屑效果（element + vue）

面包屑效果（element + vue）相关推荐

最新文章

热门文章