实现
<template>
<div>
<div class="twoNav">
<!-- 二级导航菜单 -->
<div class="left">
<el-menu
router
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
:active-text-color="activeTextColor"
@select="handleSelect"
>
<el-menu-item
v-for="el in routesArr"
:key="el.name"
:index="el.path"
>
{{ el.meta.title }}
</el-menu-item>
</el-menu>
</div>
<!-- 面包屑 -->
<div class="rigth">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="item in breadList"
:key="item.path"
replace
:to="item.path"
>
{{ item.meta.title }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</div>
</template>
<script>
export default {
name: "TwoNav",
props: {
activeTextColor: {
type: String,
default: "#3160A8",
},
},
data() {
return {
// 面包屑
breadList: [],
// 选中
activeIndex: "0",
// 二级导航菜单
routesArr: [],
};
},
watch: {
$route: {
handler: "getPath",
immediate: true,
},
},
created() {
this.initBreadList();
const route = this.routes();
// 二级导航菜单
this.routesArr = route;
this.activeIndex = this.$route.path;
},
methods: {
getPath() {
this.initBreadList();
this.activeIndex = this.$route.path;
},
// 初始化面包屑
initBreadList() {
this.breadList = this.$route.matched;
},
// 二级导航选中
handleSelect(key) {
this.activeIndex = key;
},
// 路由
routes() {
var routes = {
children: this.$router.options.routes,
};
var route = this.$route.matched;
for (var i = 0; i < route.length - 1; i++) {
routes = routes.children.find((e) => e.name == route[i].name);
}
return routes.children;
},
},
};
</script>
<style lang="scss" scoped>
.twoNav {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 48px 0;
box-sizing: border-box;
border-bottom: 1px solid rgba(216, 216, 216, 1);
.left {
font-size: 24px;
}
.el-menu--horizontal > .el-menu-item {
border-bottom: none;
text-decoration: none;
}
}
</style>
这里用到了两个重要的属性 :
- this.$route.matched (返回一个数组,包含当前路由的所有嵌套路径片段的路由记录) 如图:
会返回一个平铺结构的数组,那么拿到数据我们就可以操作了 直接循环面包屑就可。
- this.$route.path (直接获取当前页面的url ) 如图:
为什么要获取url呢?因为我把key的值设置的是路由的path路径,点击导航栏的时候要调用组件内置事件handleSelect 给activeIndex赋值实现高亮,当然我这里只是其中一种思路,肯定会有更好的实现思路的。
遇到的问题
因为切换路由的同时面包屑也要同步更新,我最初的方案是使用watch来监听,这个想法没错,但是刚开始监听的是activeIndex,这就导致了一个问题,第一次点击切换导航栏的时候面包屑是不同步更新的。
解决
监听整个$route路由,这样就完美解决了上面的问题。记录一下过程,如有更好的思路,欢迎随时交流。