Vue——解决菜单未激活状态

最新推荐文章于 2023-12-03 16:51:36 发布

原创

最新推荐文章于 2023-12-03 16:51:36 发布 · 604 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文详细介绍了Vuetify库中VListItem2组件的使用，该组件扩展了VListItem并增加了根据路由匹配激活状态的功能。通过监听$route变化，动态地为当前激活的菜单项添加类名。在菜单组件页面中，展示了如何结合VListItem2创建导航列表，包括系统管理和日志查询等菜单项，实现了基于路径正则表达式的动态匹配高亮。

VListItem2.vue组件：

<template>
  <v-list-item v-bind="$props" v-on="$listeners" v-on:change="matchRoute">
    <template
      v-for="slot in Object.keys($scopedSlots)"
      :slot="slot"
      slot-scope="scope"
    >
      <slot :name="slot" v-bind="scope" />
    </template>
  </v-list-item>
</template>

<script>
import {
   
    VListItem } from