<template>
<div class="system-container">
<div class="system-nav">
<div
class="nav"
v-for="(item, i) in navList"
:key="i"
@click="navChange(item, i)"
:class="{ active: activeNav == i }"
>
{{ item.name }}
</div>
</div>
</div>i
</template>
<script>
export default {
data() {
return {
activeNav: 0,
navList: [
{
name: "111",
path: "/system/index",
},
{
name: "222",
path: "/system/typeLibrary",
},
{
name: "333",
path: "/system/userManagement",
},
{
name: "444",
path: "/system/knowledgeBackup",
},
],
};
},
created() {},
watch: {
$route(to, from) {
this.navActive();
},
},
methods: {
navChange(item, index) {
this.$router.push(this.navList[index].path);
},
navActive() {
for (let index = 0; index < this.navList.length; index++) {
const element = this.navList[index];
if (this.$route.path.includes(element.path)) {
this.activeNav = index;
}
}
},
},
mounted() {
this.navActive();
}
};
</script>
<style lang="scss" scoped>
.system-nav {
height: 48px;
padding: 0 57px;
background-color: #fff;
display: flex;
align-items: center;
font-size: 12px;
color: #2e2c42;
position: fixed;
left: 0;
right: 0;
.nav {
margin-right: 40px;
cursor: pointer;
height: 100%;
line-height: 48px;
}
}
.active {
// width: 48px;
height: 3px;
// background-color: #7367F0;
border-bottom: 3px solid #7367f0;
}
</style>
算是一种取巧的办法吧
在需要这几个路由的组件中都引入这部分