Vue+AntDesignVue实现面包屑导航
2023/4/18 Vue
# Vue+AntDesignVue 实现面包屑导航
页面代码
<a-breadcrumb>
<a-breadcrumb-item v-for="(item,i) in breadList" :key="i" :to="{ path: item.path||item.meta.path }">
<router-link :to="item.path||item.meta.path" v-if="i!==0&&i!==breadList.length-1">
{{ item.title||item.meta.title }}
</router-link>
<span v-else>
{{ item.title||item.meta.title }}
</span>
</a-breadcrumb-item>
</a-breadcrumb>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
export default {
data() {
return {
breadList: [],
}
},
watch: {
$route() {
this.getBreadcrumb()
},
},
// computed: {
// menuData() {
// console.log(getConstantMenu())
// return getConstantMenu()
// },
// },
created() {
this.getBreadcrumb()
},
mounted() {
// console.log(this.$router);
// console.log(this.$router);
// this.menuData.forEach((item) => {
// item.icon = this.getImageUrl(item.icon)
// item.activeIcon = this.getImageUrl(item.activeIcon)
// })
},
methods: {
getBreadcrumb() {
if (
this.$route.matched[this.$route.matched.length - 1].meta
.breadList
) {
this.breadList =
this.$route.matched[
this.$route.matched.length - 1
].meta.breadList
} else {
this.breadList = this.$route.matched.slice(1)
}
// console.log(this.$route.matched);
},
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
- 主要通过this.$route.matched中的 meta 拿取当前嵌套的路由. 实现面包屑点击跳转思路：
- 需要找到面包屑层级中每个 meta title 所对应的 route，才能实现跳转
- 因此我们在处理路由表中的 meta 时就把数据存进去
{
path: 'settings/myInformation/changePassword',
name: 'changePassword',
meta: {
title: '修改密码',
breadList: [
{ title: '设置', path: '/settings' },
{ title: '我的信息', path: '/settings/myInformation/' },
{ title: '修改密码', path: '/settings/myInformation/changePassword' },
],
},
component: constantRouterComponents.ChangePassword,
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13