效果展示：
实现的思路
- 需要在路由的meta中设置breadNumber字段，‘一级页面’不设置breadNumber（因为大部分页面是一级页面，所以就不设置了~），‘二级页面’设置breadNumber=2，‘三级页面’设置breadNumber=3，以此类推…
- meta的定义：meta简单来说就是路由元信息 也就是每个路由身上携带的信息。
- meta的作用：有利于我们处理seo的东西，我们在html中加入meta标签，就是有利于处理seo的东西，搜索引擎
- 在面包屑的页面监听路由，路由变化时则触发面包屑数据处>理事件，数据处理详细在getBreadcrumb方法
- 面包屑数据处理完成后，要做刷新页面时缓存数据的操作（这里是用vuex配合sessionStorage来实现）
代码的具体实现思路：
路由配置：
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
component: () => import("../views/Home.vue"),
children: [
{
path: "/index1",
component: () => import("../views/index1.vue"),
meta: {
requireAuth: true,
},
},
{
path: "/index2",
name: "index2",
component: () => import("../views/index2.vue"),
meta: {
requireAuth: true,
breadNumber: 2,
},
},
{
path: "/index3",
name: "index3",
component: () => import("../views/index3.vue"),
meta: {
requireAuth: true,
breadNumber: 3,
},
},
{
path: "/index4",
name: "index4",
component: () => import("../views/index4.vue"),
meta: {
requireAuth: true,
breadNumber: 4,
},
},
],
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
组件中使用：
<template>
<div>
<el-container>
<el-header></el-header>
<el-container>
<el-aside width="200px">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']" router>
<el-submenu index="1">
<el-menu-item index="/index1">选项1</el-menu-item>
<el-menu-item index="/index2">选项2</el-menu-item>
<el-menu-item index="/index3">选项3</el-menu-item>
<el-menu-item index="/index4">选项4</el-menu-item>
</el-submenu>
</el-menu>
</el-aside></el-aside
>
<el-main>
<div class="box">
<!--面包屑-->
<el-breadcrumb class="breadcrumb" separator="/">
<!--面包屑列表,这里的vfor和vif不能一起使用，要切记-->
<el-breadcrumb-item v-for="(item, index) in breadList" :key="index" @click.native="breadcrumbClick(item)" v-if="item.name" style="cursor: pointer">
{
{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<router-view> </router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {};
},
watch: {
// 监听路由的变化
$route() {
this.getBreadcrumb();
},
},
methods: {
// 面包屑数据处理
getBreadcrumb() {
let that = this;
// 由于本项目大部分属于‘一级’页面，所以在设置路由时候，一级页面不设置breadNumber = 1，‘二级’页面以上才设置breadNumber
let breadNumber = typeof this.$route.meta.breadNumber !== "undefined" ? this.$route.meta.breadNumber : 1;
// 获取当前页面的名字和路由，并组合成新的对象
let newBread = { name: this.$route.name, path: this.$route.fullPath };
let vuexBreadList = []; // 默认初始化面包屑数据
if (breadNumber !== 1) {
// 当前面包屑breadNumber大于1时才会从vuex中获取值
vuexBreadList = that.$store.state.breadListState; // 获取breadList数组
}
if (breadNumber < vuexBreadList.length) {
// "回退"面包屑----判断条件：当前路由breadNumber小于vuexBreadList的长度
vuexBreadList.splice(breadNumber - vuexBreadList.length, vuexBreadList.length - breadNumber);
}
if (breadNumber > vuexBreadList.length) {
// 添加面包屑----判断条件：当前路由breadNumber大于vuexBreadList的长度
vuexBreadList.push(newBread);
}
// 处理完数据后，将最终的数据更新到vuex（用于页面刷新）
that.$store.commit("breadListMutations", vuexBreadList);
// 处理完数据后，将最终的数据更新为新的面包屑数组
that.breadList = vuexBreadList;
},
// 面包屑点击事件
breadcrumbClick(item) {
this.$router.push({
path: item.path,
});
},
},
};
</script>
vuex 的配置：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
breadListState: [], // 面包屑列表数据
},
mutations: {
breadListMutations(getters, list) {
getters.breadListState = list;
},
},
actions: {
},
modules: {
},
});
APP.vue页面的相关配置（用于页面刷新时缓存vuex数据）
created: function () {
// 在页面加载时读取sessionStorage里的状态信息
sessionStorage.getItem("umeetCloudVuex") && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(sessionStorage.getItem("umeetCloudVuex"))));
// 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("umeetCloudVuex", JSON.stringify(this.$store.state));
});
},
此文章有那些需要修改的地方，请尽快指出，会即使修改！