好资源导航 » 文章资讯 » vue element-ui实现动态面包屑导航

vue element-ui实现动态面包屑导航

2023-08-04 02:13:03 59

vueelement-ui动态面包屑导航，供大家参考，具体内容如下

直接上代码

一、template代码

//这是单独的组件

二、script代码

exportdefault{
//初始化数据对象
data(){
return{
breadList:[]
};
},
//监听属性
watch:{
//监听路由
$route(val){
//调用获取路由数组方法
this.getBreadList(val);
}
},
//自定义事件
methods:{
/**
*@description获取路由数组
*@paramsval路由参数
*@authortw
*/
getBreadList(val){
//过滤路由matched对象
if(val.matched){
letmatched=val.matched.filter(item=>item.meta&&item.meta.title);
//拿到过滤好的路由v-for遍历出来
this.breadList=matched;
}
}
}
}

三、css代码

css样式是放在一个单独的样式文件夹里面

/*面包屑导航*/
.el-breadcrumb{
@includeptrbl(16px,16px,16px,16px);
box-sizing:border-box;
background:$white;
border-bottom:1pxsolid#EEE;
}

以上就是面包屑的制作过程了。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue element-ui实现动态面包屑导航

热门推荐

随机推荐