vue element-ui实现动态面包屑导航
vue element-ui动态面包屑导航,供大家参考,具体内容如下
直接上代码
一、template代码
// 这是单独的组件 <template> <el-breadcrumb separator-class="el-icon-arrow-right"> // 首页我是写死的,其他的遍历出来 <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item> // 因为路由是后台返回的,所以取title是按照后台格式来取的 <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{ item.meta.title }}</el-breadcrumb-item> </el-breadcrumb> </template>
二、script代码
export default { // 初始化数据对象 data() { return { breadList: [] }; }, // 监听属性 watch: { // 监听路由 $route(val) { // 调用获取路由数组方法 this.getBreadList(val); } }, // 自定义事件 methods: { /** * @description 获取路由数组 * @params val 路由参数 * @author tw */ getBreadList(val) { // 过滤路由matched对象 if (val.matched) { let matched = val.matched.filter(item => item.meta && item.meta.title); // 拿到过滤好的路由v-for遍历出来 this.breadList = matched; } } } }
三、css代码
css样式是放在一个单独的样式文件夹里面
/* 面包屑导航 */ .el-breadcrumb { @include ptrbl(16px,16px,16px,16px); box-sizing: border-box; background: $white; border-bottom: 1px solid #EEE; }
以上就是面包屑的制作过程了。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
栏 目:JavaScript
本文地址:https://www.xiuzhanwang.com/a1/JavaScript/9421.html
您可能感兴趣的文章
- 04-02java后端代码分页 java后端实现分页page
- 01-10Echarts实现单条折线可拖拽效果
- 01-10在Vue项目中使用Typescript的实现
- 01-10js实现上传图片并显示图片名称
- 01-10Vue中使用Lodop插件实现打印功能的简单方法
- 01-10echarts实现折线图的拖拽效果
- 01-10d3.js实现图形缩放平移
- 01-10小程序简单两栏瀑布流效果的实现
- 01-10H5实现手机拍照和选择上传功能
- 01-10Echarts实现多条折线可拖拽效果
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 04-02jquery与jsp,用jquery
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-11ajax实现页面的局部加载
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-10delphi制作wav文件的方法
- 01-10SublimeText编译C开发环境设置
- 01-10C#中split用法实例总结
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文