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 "vuetify/lib";
    
    export default {
      name: "VListItem2",
      extends: VListItem,
      props: {
    matcher: {
      type: RegExp,
      required: true,
    },
      },
      watch: {
    $route: "matchRoute",
      },
      mounted() {
    this.matchRoute();
      },
      methods: {
    matchRoute() {
      this.$nextTick(() => {
        if (this.matcher.test(this.$route.path)) {
          this.$el.classList.add(this.activeClass);
          this.$el.classList.add("v-list-item--active");
        } else {
          this.$el.classList.remove(this.activeClass);
          this.$el.classList.remove("v-list-item--active");
        }
      });
    },
      },
    };
    </script>

    <v-list dense class="nav-list">
     <v-list-item-group color="primary">
       <v-list-item key="dashboard" to="/dashboard" v-ripple="false">
     <span class="iconfont icon-dashboard1"></span>
     <span style="height: 30px; line-height: 30px">系统管理</span>
       </v-list-item>	   <VListItem2
     key="logs"
     to="/logs"
     v-ripple="false"
     :matcher="/^\/(logs|signin_logs|admin_logs)/"
       >
     <span class="iconfont icon-contentpaste"></span>
     <span style="height: 30px; line-height: 30px">日志查询</span>
       </VListItem2>
     </v-list-item-group>
    </v-list>
    
    <script>
    import VListItem2 from "../components/VListItem2";
    
    export default {
      name: "DashboardLayout",
      components: {
    VListItem2,
      }
    };