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