Vue折腾记
来源:互联网 发布:淘宝店推广软文范文 编辑:程序博客网 时间:2024/05/29 03:40
前言
这个组件比侧边栏的简单许多..
那么这个你能学到什么,见仁见智哈….
先看效果图
我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取
疑惑解答:
点击父(也就是折叠菜单)为什么会跑到子菜单第一个
因为我第一个子路由是空路径,也就是默认路由
点击首页为什么会跑到客户管理的第一个
因为根路由我写了个重定向
功能点
- 支持分隔符的传入,字符串格式
- 标题的同步改动
实现原理
面包屑的文字不是通过命名路由的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>
总结
看了有所收获是我的荣幸,看了毫无所获那我也没辙了,哇哈哈..
阅读全文
1 0
- Vue折腾记
- Vue折腾记
- Vue折腾记
- Vue 折腾记
- Vue 折腾记
- Vue 折腾记
- Vue 折腾记
- Vue 折腾记
- Vue 折腾记
- Vue 折腾记
- Vue 折腾记
- Vue折腾记-(1)初探
- 我被VUE折腾惨了
- 分享自己折腾多时的一套 vue 组件 -- we-vue
- vuejs-折腾系列(一)vue-fontawesome使用
- Firefox 折腾记
- hsqldb2.0折腾记
- 折腾Kindle记
- java读取xml文件的四种方法
- jquery(一)
- 使div水平、垂直居中
- ubuntu修改IP地址和网关的方法
- B.FRIENDit壁虎忍者usb背光机械游戏键盘G-Master青轴无冲跑马灯机械键盘+G2背光游戏鼠标套装
- Vue折腾记
- RecyclerView的基本使用
- 优先队列priority_queue 用法详解
- android四大组件简单总结
- 权限判断
- python 将 mysql原有的表结构导入到django 的 models中
- sql2008 只有已安装的包和正在运行的包,左侧没有数据库,怎么添加数据库
- C++ bitset学习
- 按每天的日期归类同一天的数据的方法实现。