带参数路由面包屑的实现
主要参考:https://segmentfault.com/a/1190000010574901改进:VUEX用于组件间通信。此问题无需进程间通信。面包屑最后一级(当前路由页面)应该是无链接状态。最简代码(使用element组件库):<template><el-breadcrumb separator="/">&l
·
主要参考:
https://segmentfault.com/a/1190000010574901
改进:
- VUEX用于组件间通信。此问题无需进程间通信。
- 面包屑最后一级(当前路由页面)应该是无链接状态。
最简代码(使用element组件库):
<template>
<el-breadcrumb separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
<span v-if="index == breadList.length - 1">{{item.name}}</span>
<router-link v-else :to="item.path">{{item.name}}</router-link>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
export default {
created() {
this.getBreadcrumb()
},
data() {
return {
breadList: []
}
},
watch: {
$route() {
this.getBreadcrumb()
}
},
methods: {
getBreadcrumb() {
const breadNumber = typeof (this.$route.meta.breadNumber) !== 'undefined' ? this.$route.meta.breadNumber : 0
const newBread = { name: this.$route.meta.title, path: this.$route.fullPath }
this.breadList = JSON.parse(sessionStorage.getItem('breadListStorage')) || []
this.breadList.splice(breadNumber, this.breadList.length - breadNumber, newBread)
sessionStorage.setItem('breadListStorage', JSON.stringify(this.breadList))
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)