vue中的面包屑导航组件实例代码

vue导航" title="面包屑导航">面包屑导航组件

用来将其放到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中的面包屑导航组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上是 vue中的面包屑导航组件实例代码 的全部内容, 来源链接: utcz.com/z/318512.html

回到顶部