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
| <template>
| <div class="index_crumb">
| <el-breadcrumb separator="/">
| <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
| </el-breadcrumb>
| </div>
| </template>
|
| <script>
| export default {
| props: {
| id: { type: [Number, String], default: 0 },
| },
| components: {},
| data() {
| return { list: [], item: [], nav: [] };
| },
| watch: {
| id() {
| this.init();
| },
| },
| methods: {
| init() {
| if (!this.id) return 0;
| let len = this.id.length / 2 - 1;
| let o = [{ title: this.$route.meta.title, id: this.$route.meta.to }];
| let id = this.id;
| for (let i = 0; i < len; i++) {
| let vv = this.spt(id);
| id = vv.id;
| o.push(vv);
| }
| o = o
| .filter((k) => {
| return k.id !== undefined;
| })
| .map((k) => {
| if (k.path) {
| k.path = "/" + k.path.split("/")[1];
| }
| return k;
| });
| this.nav = o.reverse();
| },
| once() {
| this.item = this.$nav.title();
| },
| spt(v) {
| if (!v) return {};
| let n = v.substr(0, v.length - 2);
| let vs = [];
| if (n.length > 2) {
| vs = this.list.filter((j) => {
| return +j.id === +n;
| });
| } else {
| vs = this.item.filter((k) => {
| return +k.id === +n;
| });
| }
| return vs[0] || {};
| },
| },
| mounted() {
| let x = this.$router.options.routes;
| this.list = x
| .filter((k) => {
| return k.path !== "/" && k.path !== "/*";
| })
| .map((k) => {
| return { path: k.path, title: k.meta.title, id: k.meta.to };
| });
| this.once();
| this.init();
| },
| };
| </script>
| <style lang='less' scoped>
| .index_crumb {
| box-sizing: border-box;
| padding: 15px;
| .el-breadcrumb {
| line-height: 30px;
| height: 30px;
| }
| }
| </style>
|
|
