代码模版-vue设置进入某个页面时该页面菜单item高亮

本文链接：https://blog.csdn.net/abcnull/article/details/132000698

本文介绍了如何在Vue项目中结合vue-router实现菜单项的高亮显示。当用户点击左侧菜单栏进入对应页面时，确保被选中的菜单项保持高亮状态。这涉及到在HTML中使用router-link和动态class绑定，以及在JavaScript中通过watch监听路由变化来更新activePath，从而控制菜单项的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

简介
前置依赖
html 菜单 item
js 监听路由变化

简介

比如说，左侧有众多菜单栏，当点击一个菜单栏，进入一个页面，要保证左侧此页面对应的菜单栏 item 是高亮的

前置依赖

和 vue 搭配的路由一般使用 vue-router，可以 npm 拉和使用，然后 src/router/index.js 默认是写好的，可以看我之前文章，大概就是配置路由，然后让这个路由被项目使用：

// index.js 中的代码

import { createRouter, createWebHistory} from "vue-router"

const routes = [
    {
        // 路由 1  
    },
    {
        // 路由 2
    },
]

const router = createRouter({
    routes, // 路由路径哪些
    history: createWebHistory(),
})

export default router

html 菜单 item

在某个应用组建页面，你需要做这种菜单依据定位到哪个 router 来进行高亮

<li>
    <router-link :to="/xxx/yyy" :class="[activePath=='/xxx/yyy'?'style1':'style2']"> </router-link>
</li>

<!-- router-view 可能在下方什么地方显示 -->

下方 js 有 activePath

如果 activePath 是这个路径，那么就用 style1 的高亮样式，否则用 style2 样式

这里的路由 /xxx/yyy 在实际开发中往往是 js 中传过来的变量形式

js 监听路由变化

在同一个应用组件中的 js 区域有：

import {ref, watch} from "vue";
import {useRoute} from "vue";

const route = useRoute()
const activePath = ref(null)

// 监听路由的变化，有变化 newVal 中就会有最新的路由
watch(route, (newVal, oldVal) => {
  console.log(newVal.path)
  activePath.value = newVal.path
}, {immediate: true, deep: true});