Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

基础用法

适用广泛的基础用法。

你需要做的是将面包屑导航所包含的标题名和路径名以数组形式存放并绑定:breadcrumbData传送。

具体如下：

<template><fl-Breadcrumb :breadcrumbData = "dataBase" @handleClick = "getPathAfterClick"></fl-Breadcrumb> </template> <script>export default{data() {return {dataBase: [{name:'首页',path:'/',},{name:'活动列表',path:'/list',},{name:'活动详情',path:'/more'},{name:'活动分类',path:'/category'}]}},} </script>

图标分隔符

通过设置iconSplit属性自定义你所想要的图标分隔符。

<template><fl-Breadcrumb :breadcrumbData = "dataBase" iconSplit = '>' @handleClick = "getPathAfterClick"></fl-Breadcrumb> </template> <script>export default{data() {return {dataBase: [{name:'首页',path:'/',},{name:'活动列表',path:'/list',},{name:'活动详情',path:'/more'},{name:'活动分类',path:'/category'}]}},} </script>

不同的路由跳转方式

你可以设置replacePath属性使面包屑导航的所有跳转都为replace方式。

默认为push的路由跳转，无需设置。

<template><fl-Breadcrumb :breadcrumbData = "dataBase" iconSplit = '>' @handleClick = "getPathAfterClick" replacePath></fl-Breadcrumb> </template> <script>export default{data() {return {dataBase: [{name:'首页',path:'/',},{name:'活动列表',path:'/list',},{name:'活动详情',path:'/more'},{name:'活动分类',path:'/category'}]}},} </script>

Attributes

参数说明类型可选值默认值

breadcrumbData	面包屑导航数据源	Array	——	——
iconSplit	图标分隔符	String	——	/
handleClick	跳转后的回调函数，返回导航信息	event	——	——
replacePath	设置路由跳转模式	Boolean	true / false	false

源码：

<template><div><div class = "breadBox"><div class = "breadChild" v-for = "(item,index) in breadcrumbData" :key = "item.path"><span :style = "defaultStyle(index)" @click = "toggleRouter(index,item.path,item)">{{item.name}}</span><span class = "centerChose" v-if = "index !== breadcrumbData.length - 1"> {{$attrs.iconSplit ? $attrs.iconSplit : '/'}} </span></div></div></div> </template><script>export default {props: {breadcrumbData: {type: Array,default: []},},data() {return {activeLevel:1, //选中导航等级}},methods: {toggleRouter(index,path,data) { //解析跳转URLvar baseURL = window.location.href.split('/')[0] + '//' + window.location.href.split('/')[2]this.activeLevel = index + 1;if(this.$attrs.replacePath == ''){console.log(1)window.history.replaceState(null,null,baseURL + path)}else{window.history.pushState(null,null,baseURL + path)}this.$emit('handleClick',data)}},computed: {defaultStyle() { //选中样式return (index) =>{if(index < this.activeLevel){return 'font-weight:bold;cursor:pointer;'}}}},} </script><style scoped> .breadBox{display: flex; } .breadBox .breadChild{margin:0 2px;font-size:14px; } .breadBox .centerChose{margin:0 3px; } </style>

总结

以上是生活随笔为你收集整理的手写Vue个人组件库——fl-Breadcrumb的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。