首页vue3页面调整菜单高亮

vue3页面调整菜单高亮

时间: 2025-02-08 09:35:16 浏览: 45

### 如何在 Vue3 中实现菜单高亮显示为了实现在 Vue3 项目中的菜单项高亮显示效果，可以采用多种方法来确保用户体验良好并保持代码简洁高效。一种常见的方式是通过路由参数动态绑定样式类名。 #### 使用 `router-link` 和自定义 CSS 类当使用 Vue Router 创建单页面应用 (SPA) 时，可以通过监听当前路径并与链接的目标路径对比，在匹配的情况下添加特定的 CSS 类用于视觉上的突出展示[^2]。 ```html <template> <nav>  <RouterLink v-for="item in menuItems" :key="item.path" :to="item.path" :class="{ 'active': isActive(item.path) }"> {{ item.title }} </RouterLink> </nav> <main> <RouterView /> </main> </template> <script setup lang="ts"> import { ref, computed } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute(); let currentPath = computed(() => route.fullPath); // 菜单项配置 const menuItems = [ { title: "首页", path: "/" }, { title: "关于", path: "/about" } ]; function isActive(path:string):boolean { return currentPath.value === path; } </script> <style scoped> .active { background-color: #0a6ebf; /* 高亮背景颜色 */ color: white; /* 文字颜色 */ } /* 基础样式 */ nav a { padding: 8px 16px; text-decoration: none; display: block; } </style> ``` 此段代码展示了如何利用 Vue 的响应式特性以及 vue-router 提供的功能轻松地实现了基于 URL 地址栏变化而自动更新激活状态的效果。每当用户点击不同的导航条目时，对应的 `<RouterLink>` 组件会根据其目标地址是否等于当前浏览位置决定是否加上 `.active` 这个特殊标记，并借助于预设好的 CSS 定义改变外观表现形式。

阅读全文