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

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 "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,
  }
};