Vue折腾记 - (2)写一个不大靠谱的面包屑组件
2017-07-18 13:47
537 查看
前言
这个组件比侧边栏的简单许多..那么这个你能学到什么,见仁见智哈….
先看效果图
我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取疑惑解答:
点击父(也就是折叠菜单)为什么会跑到子菜单第一个
因为我第一个子路由是空路径,也就是默认路由
点击首页为什么会跑到客户管理的第一个
因为根路由我写了个重定向
功能点
支持分隔符的传入,字符串格式
标题的同步改动
实现原理
面包屑的文字不是通过命名路由的name实现(很多问题),
而是放到meta里面实现一个自定义name
遍历遍历遍历,比对比对比对..剩下的看注释..并不是很麻烦
代码
路由大致的写法(懒加载)import pageRouterView from "@/pages/adManage/adManage.vue"; // 广告管理 const ADADD = resolve => require(["@/pages/adManage/adadd.vue"], resolve); const ADCHECK = resolve => require(["@/pages/adManage/adcheck.vue"], resolve); export default [ { path: "ad", component: pageRouterView, meta: { breadcrumbName: "广告管理" }, children: [ { path: "", component: ADADD, meta: { breadcrumbName: "广告新增" } }, { path: "check", component: ADCHECK, meta: { breadcrumbName: "广告审核" } } ] } ];
breadcrumb.vue
<template> <div> <span class="title">{{title}}</span> <ul class="breadcrumb"> <li v-for="(item,index) in brumblist" :key="index"> <router-link :to="item.path">{{item.meta.breadcrumbName}}</router-link> <span class="separator" v-if="index !== brumblist.length-1">{{separator}}</span> </li> </ul> </div> </template> <script> export default { created () { this.getBreadcrumb(); }, data () { return { title: '', // 页面标题 brumblist: '' // 路由集合 } }, props: ['separator'], methods: { getBreadcrumb () { this.brumblist = this.$route.matched; this.$route.matched.forEach((item, index) => { // 判断父级路由是否为空字符串或者meta是否为首页,直接复写路径到根目录 // 后面的就是判断路由和当前遍历的项目是否一致,是的话把标题的值给上 item.meta.breadcrumbName === '首页' ? item.path = '/' : this.$route.path === item.path ? this.title = item.meta.breadcrumbName : ''; }) } }, watch: { $route () { this.getBreadcrumb(); } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> ul { list-style: none; margin: 0; padding: 0; clear: both; li { float: left; } a { text-decoration: none; color: #333; &:hover { color: #20a0ff; text-decoration: underline; } } } .separator { display: inline-block; padding: 0 5px; } .title { display: inline-block; font-weight: 700; font-size: 20px; } .breadcrumb { float: right; padding: 5px; } </style>
总结
看了有所收获是我的荣幸,看了毫无所获那我也没辙了,哇哈哈..相关文章推荐
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
- Vue 折腾记 - (5) 写一个不大靠谱的selectSearch组件
- Vue 折腾记 - (4) 写一个不大靠谱的 loading 组件
- Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件
- Vue 折腾记 - (9) 写一个挺靠谱的typeahead组件
- Vue折腾记 - (1)写一个不大靠谱的二级侧边栏
- Vue 折腾记 - (8) 写一个挺靠谱的多地区选择组件
- Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件
- Vue 折腾记 - (7) 写一个挺不靠谱的Vue-Echarts组件
- vue实现一个组件容器
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- 推荐一个vue, angular的组件分享网站--轮子工厂
- 如何抽象一个 Vue 公共组件
- VUE实现一个分页组件
- 用vue写一个商城的上货组件(简单易懂版,50行js实现效果)
- vue学习系列-完成一个分页组件的封装
- 从头开始开发一个vue幻灯片组件
- 基于vue2.0的一个分页组件
- Vue组件中的data必须是一个function的原因浅析
- 详解Vue用自定义指令完成一个下拉菜单(select组件)