antdesign pro vue 如何动态设置高亮
时间: 2023-10-09 09:13:39 浏览: 42
你可以通过在路由配置中设置`meta`字段来动态设置菜单高亮。首先在路由配置中,为需要高亮的菜单项添加一个`meta`字段,例如:
```javascript
{
path: '/dashboard',
name: 'dashboard',
component: () => import('@/views/dashboard/index.vue'),
meta: { activeMenu: '/dashboard' }
}
```
然后在菜单组件中,使用`v-bind:class`动态设置菜单项的样式,例如:
```html
<template>
<div>
<a :class="{'active': isActive('/dashboard')}" href="/dashboard">Dashboard</a>
<a :class="{'active': isActive('/users')}" href="/users">Users</a>
</div>
</template>
<script>
export default {
methods: {
isActive(menuPath) {
return this.$route.meta.activeMenu === menuPath
}
}
}
</script>
<style>
.active {
background-color: #1890ff;
color: #fff;
}
</style>
```
这样,当路由跳转到`/dashboard`时,对应的菜单项就会高亮显示。