vue左侧动态菜单栏实现

实现左侧动态菜单栏，可以使用 Vue Router 和 Vue 的动态组件。首先在路由配置中定义好菜单项和对应的路由，然后在菜单组件中通过 v-for 循环渲染出菜单项，并通过 router-link 组件实现路由跳转。同时，可以通过监听路由变化，动态设置当前选中的菜单项样式。

具体实现步骤如下：

1. 在路由配置中定义好菜单项和对应的路由：

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'dashboard',
        component: Dashboard,
        meta: { title: 'Dashboard' }
      },
      {
        path: 'user',
        component: User,
        meta: { title: 'User' }
      },
      {
        path: 'role',
        component: Role,
        meta: { title: 'Role' }
      }
    ]
  }
]

2. 在菜单组件中通过 v-for 循环渲染出菜单项，并通过 router-link 组件实现路由跳转：

<template>
  <div class="menu">
    <ul>
      <li v-for="(item, index) in menuList" :key="index" :class="{ active: item.active }">
        <router-link :to="{ path: item.path }">{{ item.meta.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: []
    }
  },
  created() {
    this.menuList = this.$router.options.routes[0].children
    this.setActiveMenu()
  },
  methods: {
    setActiveMenu() {
      const currentPath = this.$route.path
      this.menuList.forEach(item => {
        item.active = item.path === currentPath
      })
    }
  },
  watch: {
    $route() {
      this.setActiveMenu()
    }
  }
}
</script>

3. 在菜单组件中监听路由变化，动态设置当前选中的菜单项样式：

.menu li.active {
  background-color: #f0f0f0;
}