【学习打卡】第14天 Vue Element+Node.js开发企业通用管理后台系统(第8章)
2022/8/16 4:22:52
本文主要是介绍【学习打卡】第14天 Vue Element+Node.js开发企业通用管理后台系统(第8章),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:Vue Element+Node.js开发企业通用管理后台系统(第8章)
课程章节: 第8章 登录功能开发(上)
主讲老师:Sam
课程内容:
今天学习的内容包括:
- 面包屑导航
课程收获:
- 面包屑导航设计与应用
- el-breadcrumb:面包屑导航容器,separator 控制面包屑导航文本中分割线
- el-breadcrumb-item:面包屑子项目,可以使用 to 属性切换路由,slot 中可以包含 a 标签来跳转到外链
<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item> <el-breadcrumb-item>活动列表</el-breadcrumb-item> <el-breadcrumb-item>活动详情</el-breadcrumb-item> </el-breadcrumb>
使用 to 属性和 a 标签切换路由区别是:to 属性切换路由是动态替换 App.vue 中的路由内容,而 a 标签切换路由会刷新页面。
路由与面包屑导航映射:
- 生成面包屑导航,逻辑如下:
(1)获取 this.$route.matched,并过滤其中不包含 item.meta.title 的项,生成新的面包屑导航数组 matched
(2)判断 matched 第一项是否为 dashboard,如果不是,则添加 dashboard 为面包屑导航第一项
(3)再次过滤 matched 中 item.meta.title 为空的项和 item.meta.breadcrumb 为 false 的项
getBreadcrumb() { let matched = this.$route.matched.filter(item => item.meta && item.meta.title) const first = matched[0] if (!this.isDashboard(first)) { matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) } this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) }
- 渲染面包屑导航
<el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> </el-breadcrumb-item> </transition-group> </el-breadcrumb>
el-breadcrumb-item 内做了一个判断,如果是最后一个元素或者路由的 redirect 属性指定为 noRedirect 则不会生成链接,否则将使用 a 标签生成链接,但是这里使用了 @click.prevent 阻止了默认 a 标签事件触发,而使用自定义的 handleLink 方法处理路由跳转,代码如下:
handleLink(item) { const { redirect, path } = item if (redirect) { this.$router.push(redirect) return } this.$router.push(this.pathCompile(path)) }
最后,附上课程截图 ending~
这篇关于【学习打卡】第14天 Vue Element+Node.js开发企业通用管理后台系统(第8章)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程