vue 自动生成面包屑导航

根据点击的导航栏自动获取相应的面包屑导航

由于我们的路由是英文的,可以在路由中定义相关信息,进行捕获就可以了

const routes: Array = [
    // {
    //     path: "/",
    //     name:"Index",
    //     component:Index
    // }
    // 首页
    {
        path:'/',
        component:Layout,
        name:Layout,
        redirect:'/dashboard',
        children:[
            {
                path:'/dashboard',
                component:()=>import('../views/index/Dashboard.vue'),
                name:'Dashboard',
                meta:{
                    title:'首页'
                }
            }
        ]
    },

    // 基础数据【院系管理，专业管理，老师管理】
    {
        path: '/basic',
        component: Layout,
        name: 'Basic',
        meta:{
            title:'基础数据'
        },
        children: [
            {
                path: '/basic/faculty',
                component: () => import('../views/basic/Faculty.vue'),
                name:'Faculty',
                meta:{
                    title:'院系信息'
                }
            },
            {
                path: '/basic/major',
                component: () => import('../views/basic/Major.vue'),
                name:'Major',
                meta:{
                    title:'专业信息'
                }
            },
            {
                path: '/basic/teacher',
                component: () => import('../views/basic/Teacher.vue'),
                name:'Teacher',
                meta:{
                    title:'教师信息'
                }
            }
        ]
    },
    // 学生管理 【照片，信息，考试】
    {
        path: '/student',
        component: Layout,
        name: 'Student',
        meta:{
            title:'学生管理'
        },
        children: [
            {
                path: '/student/info',
                component: () => import('../views/student/Info.vue'),
                name:'Info',
                meta:{
                    title:'学生信息'
                }
            },
            {
                path: '/student/exam',
                component: () => import('../views/student/Exam.vue'),
                name:'Exam',
                meta:{
                    title:'考试信息'
                }
            },
            {
                path: '/student/image',
                component: () => import('../views/student/Image.vue'),
                name:'Image',
                meta:{
                    title:'学生照片'
                }
            }
        ]
    },
    // 用户信息【登录账号，角色信息，菜单管理，权限管理】
    {
        path: '/user',
        component: Layout,
        name: 'User',
        meta:{
            title:'用户角色'
        },
        children: [
            {
                path: '/user/account',
                component: () => import('../views/user/Account.vue'),
                name:'Account',
                meta:{
                    title:'登录账号'
                }
            },
            {
                path: '/user/roles',
                component: () => import('../views/user/Roles.vue'),
                name:'Roles',
                meta:{
                    title:'角色信息'
                }
            },
            {
                path: '/user/menu',
                component: () => import('../views/user/Menu.vue'),
                name:'Menu',
                meta:{
                    title:'菜单管理'
                }
            },
            {
                path: '/user/permission',
                component: () => import('../views/user/Permission.vue'),
                name:'Permission',
                meta:{
                    title:'权限管理'
                }
            }
        ]
    },
]

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

在面包屑导航组件中获取路由信息

BredCum.vue 面包屑组件

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

效果