vue ant-design 加面包屑
注意事项:1、路由层级要清楚2、每个路由要有title路由配置文件:{path: '/',component: RouteView,meta: { title: '首页', keepAlive: true, icon: 'search' },children: [// 消息中心...
·
注意事项:
1、路由层级要清楚
2、每个路由要有title
路由配置文件:
{
path: '/',
component: RouteView,
meta: { title: '首页', keepAlive: true, icon: 'search' },
children: [
// 消息中心
{
path: '/messageCenter',
name: 'messageCenter',
meta: { title: '消息中心' },
component: () => import('@/views/index/messageCenter')
},
}
<template>
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
<router-link
v-if="item.name != name && index != 1"
:to="{ path: item.path === '' ? '/' : item.path }"
>{{ item.meta.title }}</router-link>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script>
export default {
data () {
return {
name: '',
breadList: []
}
},
created () {
this.getBreadcrumb()
},
methods: {
getBreadcrumb () {
this.breadList = []
this.name = this.$route.name
this.$route.matched.forEach(item => {
this.breadList.push(item)
})
}
},
watch: {
$route () {
this.getBreadcrumb()
}
}
}
</script>
进入到消息模块,面包屑显示为: 首页 > 消息中心
如有问题,欢迎交流~~!
更多推荐
已为社区贡献9条内容
所有评论(0)