1. 圖示
image.png
根據(jù)路由元信息和導(dǎo)航欄數(shù)據(jù)進(jìn)行判斷梁剔，相等即為活躍高亮虽画，不相等則不高亮。
2.實(shí)現(xiàn)方法
- 首先在router.js 文件下 荣病，給各個(gè)路由添加路由元信息
- 通過(guò) this.$route.meta.active; 獲取路由元信息码撰，然后和數(shù)組的唯一標(biāo)識(shí)進(jìn)行判斷，如果為true則高亮个盆，否則不高亮脖岛。
<span v-show="active == i.id"></span> - 在通過(guò) watch 監(jiān)聽(tīng)器實(shí)時(shí)監(jiān)聽(tīng)路由的變化
//公告中心詳情頁(yè)面
{
path: '/noticeDetail',
name: 'NoticeDetail',
component: resolve => require(['@/views/index/NoticeDetail'], resolve),
meta: {
active: '2'
}
},
//幫助中心頁(yè)面
{
path: '/help',
name: 'Help',
component: resolve => require(['@/views/index/Help'], resolve),
meta: {
active: '3'
}
},
- 我封裝了一個(gè)navTab 組件
<!--頂部導(dǎo)航封裝-->
<template>
<div class="NavTop">
<div class="box">
<ul class="list">
<li
class="list_item"
v-for="(i, index) in navList"
:key="i.id"
@click="toDetail(i.path)"
>
{{ i.key }}
<span v-show="active == i.id"></span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
naem: "NavTop",
props: {
navList: {
type: Array,
default: {},
},
},
data() {
return {
active: "1",
};
},
methods: {
toDetail(path) {
this.$router.push(path);
},
},
watch: {
$route() {
if (this.$route.meta.active) {
this.active = this.$route.meta.active;
} else {
this.active = ''
}
},
},
created() {
if (this.$route.meta.active) {
this.active = this.$route.meta.active;
}
},
};
</script>
- 這個(gè)傳過(guò)去的數(shù)組 navList
```navList: [
{
id: 1,
key: '首頁(yè)',
path: '/index/home'
},
{
id: 2,
key: '公告中心',
path: '/index/noticeCenter'
},
{
id: 3,
key: '幫助中心',
path: '/index/help'
},
]
}
- 最后，即可實(shí)現(xiàn)導(dǎo)航欄活躍高亮颊亮〔癜穑·