vue中的面包屑导航组件实例代码
作者:zyx 时间:2024-05-02 17:11:28
vue的面包屑导航组件
用来将其放到navbar中;
Breadcrumb/index.vue
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group>
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
<span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.meta.title}}</span>
<router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
export default {
name: "idnex",
data(){
return {
levelList:null
}
},
created() {
this.getBreadcrumb()
},
watch:{
$route(){
this.getBreadcrumb()
}
},
methods:{
getBreadcrumb(){
let matched=this.$route.matched.filter(item=>item.name)//$route.matched 将会是一个包含从上到下的所有对象 (副本)。
const first=matched[0]
if(first && first.name !=='dashboard'){//$route.name当前路由名称 ;$route.redirectedFrom重定向来源的路由的名字
matched=[{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
}
this.levelList=matched
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 10px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
</style>
ps:下面在看下一段代码Vue 面包屑导航
样式采用的是element ui 中的面包屑设置的,
<template>
<el-breadcrumb>
<el-breadcrumb-item separator = '/' v-for = "(item,index) in breadlist" :key = 'index' :to="{path: item.path}">{{item.meta.CName}}
</el-breadcrumb-item>
</el-breadcrumb>
</template>
js部分
<script>
export default {
data(){
return {
breadlist: ''
}
},
created() {
this.getBread();
},
methods:{
getBread(){
this.breadlist = this.$route.matched;
this.$route.matched.forEach((item,index)=>{
//先判断父级路由是否是空字符串或者meta是否为首页,直接复写路径到根路径
item.meta.CName === '首页' ? item.path = '/' : this.$route.path === item.path;
});
}
},
watch:{
$route(){
this.getBread();
}
}
}
</script>
总结
以上所述是小编给大家介绍的vue中的面包屑导航组件实例代码,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://blog.csdn.net/zyx1303031629/article/details/78972820
标签:vue,面包屑,导航,组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
优雅的使用javascript递归画一棵结构树示例代码
2024-04-30 08:52:22
![](https://img.aspxhome.com/file/2023/1/132651_0s.jpg)
MySQL数值类型溢出的处理方法
2024-01-19 12:03:34
jQuery中ajax和post处理json的不同示例对比
2024-04-16 08:54:10
python绘制柱形图的方法
2022-03-07 07:36:06
![](https://img.aspxhome.com/file/2023/9/97339_0s.jpg)
python 文件下载之断点续传的实现
2023-07-18 21:57:16
![](https://img.aspxhome.com/file/2023/5/130635_0s.png)
MySQL数据库索引以及失效场景详解
2024-01-26 04:12:23
![](https://img.aspxhome.com/file/2023/4/82264_0s.png)
Python pandas库中isnull函数使用方法
2023-11-21 06:44:12
![](https://img.aspxhome.com/file/2023/4/133384_0s.png)
Python中的通函数numpy.ufunc详解
2023-09-03 22:52:08
Linux下安装MySQL教程
2024-01-19 08:05:18
![](https://img.aspxhome.com/file/2023/8/121278_0s.png)
python判断字符串是否纯数字的方法
2022-09-09 03:25:38
Python编译成.so文件进行加密后调用的实现
2022-11-17 12:49:54
Python colorama 彩色打印实现代码
2022-10-03 22:32:28
![](https://img.aspxhome.com/file/2023/9/126919_0s.png)
Keras保存模型并载入模型继续训练的实现
2021-08-12 23:23:32
![](https://img.aspxhome.com/file/2023/8/75958_0s.png)
浅析python 中大括号中括号小括号的区分
2021-06-15 15:14:16
IE不支持overrideMimeType()方法,即使是IE7.
2009-02-08 16:58:00
Sqlserver 2005使用XML一次更新多条记录的方法
2024-01-28 19:50:04
Python使用面向对象方式创建线程实现12306售票系统
2021-01-22 09:13:36
vue+element upload上传带参数的实例
2024-05-09 09:32:56
![](https://img.aspxhome.com/file/2023/3/127423_0s.png)
python调用文件时找不到相对路径的解决方案
2021-08-21 14:38:24
![](https://img.aspxhome.com/file/2023/9/124389_0s.png)
Python 的字典(Dict)是如何存储的
2021-01-24 05:51:27
![](https://img.aspxhome.com/file/2023/9/133519_0s.png)