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,
},
},
.......
],
总结:
-
通过循环下标标记每个菜单
-
动态类名对比菜单的下标和自己当前的下标
-
点击更改当前下标,组件加载更改当前下标(配合路由表meta属性)
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)