vue專案導航選單問題
目標：橫向選單點擊跳轉，顏色變換，重繪可保持狀態
// 模板template中通過回圈選單串列生成，動態類名改變顏色
<li
v-for="(item, index) in navList"
:key="index"
v-text="item.name"
:
@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屬性）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500464.html
標籤：其他
上一篇：js 關于console物件