vue 搭建一个后台管理的侧边栏菜单 代码

在Vue中搭建一个后台管理的侧边栏菜单，你可以使用Vue Router和Vue的组件来实现。下面是一个基本的示例代码：

<template>
  <div id="app">
    <div class="sidebar">
      <ul>
        <li v-for="menu in menus" :key="menu.id" @click="changeRoute(menu.route)">
          {{ menu.name }}
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        { id: 1, name: 'Dashboard', route: '/dashboard' },
        { id: 2, name: 'Users', route: '/users' },
        { id: 3, name: 'Settings', route: '/settings' }
      ]
    };
  },
  methods: {
    changeRoute(route) {
      this.$router.push(route);
    }
  }
};
</script>

<style>
.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #e0e0e0;
}
</style>

在这个示例中，我们首先定义了一个包含侧边栏菜单项的`menus`数组。每个菜单项有一个唯一的`id`、名称`name`和对应的路由路径`route`。

在模板部分，我们使用`v-for`指令遍历`menus`数组，并渲染每个菜单项。我们给每个菜单项绑定了点击事件`@click`，当点击菜单项时会调用`changeRoute`方法来切换路由。

在`changeRoute`方法中，我们使用`this.$router.push(route)`来切换到对应的路由路径。

最后，我们使用`<router-view></router-view>`来显示当前路由对应的组件内容。

在样式部分，我们简单地定义了侧边栏的样式，包括宽度、背景色以及菜单项的样式。

请注意，以上代码只是一个基本的示例，你可以根据自己的需求进行修改和扩展。同时，你需要确保已经正确配置了Vue Router，并且定义了对应的路由和组件。