Vue2.x+elementUI实现面包屑导航分析_vue element 面包屑和路由

一、功能分析

	 面包屑功能实现
    1.路由模块化整理成一二级路由
    2.每级路由配置路由源信息
    3.在面包屑组件获取路由源信息中的meta数据，在matched中可以获取到各级meta信息
    4.过滤matched中的meta，过滤掉空的meta
    5.循环出我们需要的数据格式
    6.过滤好的数据格式赋值给data里面的bread
    7.监听路由，路由改变就重新给bread赋值
    8.面包屑导航的动态选中样式给当前路径的index
1
2
3
4
5
6
7
8
9

router.js代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location){
  return originalPush.call(this,location).catch(err=> err)
}

const routes = [
  // 登录页面
  {
    path: '/login',
    name: 'login',
    component: ()=>import('@/views/login/Login.vue')
  },
  // 注册页面
  {
    path: '/register',
    name: 'register',
    component: ()=>import('@/views/register/Register')
  },
  // 后台首页
  {
    path:'/managehome',
    name: 'managehome',
    meta:{
      title:'首页'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      // 首页
      {
        path:'',
        name:'managehomehome',
        component:()=>import('@/views/managehome/main/homeAside/SysHome.vue')
      }
    ]
  },

  // 内容管理
  {
    path:'/contentmanage',
    name: 'contentmanage',
    redirect:'/contentmanage/sysblog',
    meta:{
      title:'内容管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      // 博客文章
      {
        path:'/contentmanage/sysblog',
        name:'sysblog',
        meta:{
          title:'博客文章'
        },
        component:()=>import('@/views/managehome/main/contentAside/SysBlog.vue')
      },
      // 文章分类
      {
        path:'/contentmanage/syscategory',
        name:'syscategory',
        meta:{
          title:'文章分类'
        },
        component:()=>import('@/views/managehome/main/contentAside/SysCategory.vue')
      },
      // 发布文章
      {
        path:'/contentmanage/syspublicblog',
        name:'syspublicblog',
        meta:{
          title:'发布文章'
        },
        component:()=>import('@/views/managehome/main/contentAside/SysPublicBlog.vue')
      }
    ]
  },

  // 界面管理
  {
    path:'/facemanage',
    name:'facemanage',
    redirect:"/facemanage/sysswiper", 
    meta:{
      title:'界面管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      // 轮播图管理
      {
        path:"/facemanage/sysswiper",
        name:'sysswiper',
        meta:{
          title:'轮播图管理'
        },
        component:()=>import('@/views/managehome/main/facemanage/SysSwiper.vue')
      },
      // 广告图管理
      {
        path:"/facemanage/sysadvise",
        name:'sysadvise',
        meta:{
          title:'广告图管理'
        },
        component:()=>import('@/views/managehome/main/facemanage/SysAdvise.vue')
      }
    ]
  },

  // 用户管理
  {
    path:'/usersmanage',
    name:'usersmanage',
    meta:{
      title:'用户管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      {
        path:"",
        component: ()=>import('@/views/managehome/main/usermanage/SysUsers.vue')
      }
    ]
  },

  // 评论管理
  {
    path:'/discussmanage',
    name:'discussmanage',
    meta:{
      title:'评论管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      {
        path:"",
        component: ()=>import('@/views/managehome/main/discussmanage/SysDiscuss.vue')
      }
    ]
  },

  // 个人设置
  {
    path:'/personalset',
    name:'personalset',
    meta:{
      title:'个人设置'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      {
        path:"",
        component: ()=>import('@/views/managehome/main/personalset/SysPersonal.vue')
      }
    ]
  },
]

const router = new VueRouter({
  routes
})

export default router

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

BreadCrumb.vue代码：

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(bread, index) in bread"
              :key="index"
              :to="bread.path"
            >{{ bread.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "myBreadCrumb",
  data() {
    return {
      bread: [
        {
          title: "首页",
          path: "/managehome/syshome"
        }
      ]
    };
  },
  methods: {
    getBreadData() {
      const meatched = this.$route.matched;
      const filterArr = meatched.filter(item => {
        return item.meta && item.meta.title;
      });

      const newBread = filterArr.map(item => {
        return {
          title: item.meta.title,
          path: item.path
        };
      });
      this.bread = [{path:'/managehome',title:'首页'},...newBread];
    }
  },
  created() {
    // 面包屑功能实现
    // 1.路由模块化整理成一二级路由
    // 2.每级路由配置路由源信息
    // 3.在面包屑组件获取路由源信息中的meta数据，在matched中可以获取到各级meta信息
    // 4.过滤matched中的meta，过滤掉空的meta
    // 5.循环出我们需要的数据格式
    // 6.过滤好的数据格式赋值给data里面的bread
    // 7.监听路由，路由改变就重新给bread赋值
    this.getBreadData()
  },
  watch: {
    "$route.path": function() {
      this.getBreadData()
    }
  }
};
</script>
<style lang="less" scoped>
.breadcrumb {
  height: 40px;
  background-color: rgb(217, 211, 203);
  padding-left: 12px;
}
.el-breadcrumb {
  font-size: 14px;
  line-height: 3;
}
</style>
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

Aside.vue代码：

<template>
  <div class="aside">
    <div class="asideLogo"></div>
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo el-my-menu"
      :collapse="isCollapse"
      text-color="white"
      background-color="#233b59"
      :router="true"
    >
      <el-menu-item index="/managehome">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-notebook-2"></i>
          <span slot="title" color="white">内容管理</span>                                                                                                                   
        </template>
          <el-menu-item index="/contentmanage/sysblog">博客文章</el-menu-item>
          <el-menu-item index="/contentmanage/syscategory">文章分类</el-menu-item>
          <el-menu-item index="/contentmanage/syspublicblog">发布文章</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-monitor"></i>
          <span slot="title" color="white">界面管理</span>                                                                                                                   
        </template>
          <el-menu-item index="/facemanage/sysswiper">轮播图管理</el-menu-item>
          <el-menu-item index="/facemanage/sysadvise">广告图管理</el-menu-item>
      </el-submenu>
      <el-menu-item index="/usersmanage" >
        <i class="el-icon-user-solid"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/discussmanage" >
        <i class="el-icon-chat-square"></i>
        <span slot="title">评论管理</span>
      </el-menu-item>
      <el-menu-item index="/personalset" >
        <i class="el-icon-s-tools"></i>
        <span slot="title">个人设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "myAside",
  data() {
    return {
      
    };
  },
  methods: {
    
  },
  computed:{
    // 活动选项
    active(){
      return this.$route.path
    },
    isCollapse(){
        return this.$store.state.Tab.isCollapse
    }
  }
};
</script>
  <style lang="less" scoped>
  .aside{
    height: 100vh;
    overflow: auto;
    background: #233b59 ;
     -webkit-box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
     box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
     z-index: 2;
    .asideLogo{
        width: 100%;
        height: 80px;
        background: #233b59  url(@/assets/imgs/asideLogo.png) no-repeat center;
        background-size: contain;
    }
    .el-menu-item,.el-submenu{
        background-color: #233b59;
    }
    .el-menu{
      border-right:none;
    }
  }
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

</style>
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