vue项目导航菜单实现

vue项目导航菜单问题

目标:横向菜单点击跳转,颜色变换,刷新可保持状态

 // 模板template中通过循环菜单列表生成,动态类名改变颜色    

<li
v-for="(item, index) in navList"
:key="index"
v-text="item.name"
:class="{ 'active-color': index === currentIndex }"
@click="navigate(item.path, index)"
></li>

data() {
return {
navList: [
{
name: "777",
path: "/intelligent",
},
{
name: "666",
path: "/malfunction",
},
{
name: "555",
path: "/status",
},
{
name: "444",
path: "/system",
},
{
name: "333",
path: "/three",
},
],
// 保存当前的菜单的下标,每次点击切换菜单改变,并且刷新时组件加载也要改变
currentIndex: 0,
}

methods: {
navigate(path, index) {
this.currentIndex = index;
this.$router.push(path);
},
}

mounted() {
// 路由中配置meta属性,保证每次刷新都能拿到当前的菜单下标
this.currentIndex = this.$route.meta.index;
},

// 路由表
[
{
path: "intelligent",
name: "work",
component: () => import("@/views/zltc/intelligentwork/IndexItem.vue"),
meta: {
index: 0,
},
},
{
path: "malfunction",
name: "malfunction",
component: () =>
import("@/views/zltc/malfunctiondiagnosis/IndexItem.vue"),
meta: {
index: 1,
},
},
.......
],
总结:
  1. 通过循环下标标记每个菜单

  2. 动态类名对比菜单的下标和自己当前的下标

  3. 点击更改当前下标,组件加载更改当前下标(配合路由表meta属性)

标签: Javascript

添加新评论