vuejs 切换导航条高亮(路由菜单高亮)的方法示例

<div class="nav-box"><!-- 导航列表 --><li class="nav-item" v-for="(item, index) in nav" @click="routerLink(index, item.path)" :key="index"> <!-- 判断高亮表 --> <p :class=" navIndex === index ? 'item-cn item-cn-active' : 'item-cn'"> {{ item.title }} </p> <!-- 判断高亮表 --> <p :class="navIndex === index ? 'item-en item-en-active' : 'item-en'"> {{ item.en }} </p></li></div>

// 导航条data() { return { nav: [  {title: '首页', en: 'Code', path: '/'},  {title: '开源', en: 'Source', path: '/source'},  {title: '关于', en: 'About', path: '/about'}, ], navIndex: 0, }},

/** * 路由跳转 * @param index * @param link*/routerLink(index, path) { // 点击哪个路由就赋值给自定义的下下标 this.navIndex = index; // 路由跳转 this.$router.push(path)},/** * 检索当前路径 * @param path*/checkRouterLocal(path) { // 查找当前路由下标高亮 this.navIndex = this.nav.findIndex(item => item.path === path);}

watch: { "$route"() { // 获取当前路径 let path = this.$route.path; // 检索当前路径 this.checkRouterLocal(path); }},

.nav-box { display: flex;}.nav-item { text-align: center; padding: 0 32px; position: relative; display: inline-block; font-size: 14px; line-height: 25px;}/*导航普通状态*/.item-cn { color: #1c2438; font-weight: 800;}/*导航普通状态*/.item-en { color: #666; font-size: 12px;}/*导航高亮*/.item-cn-active { color: #2d8cf0;}/*导航高亮*/.item-en-active { color: #5cadff;}.nav-item:hover .item-cn { color: #2d8cf0;}.nav-item:hover .item-en { color: #5cadff;}.nav-item:after { position: absolute; right: 0; top: 20px; content: ''; width: 1px; height: 16px; background-color: #f8f8f8;}.nav-item:after:last-child { width: 0;}