vue中怎么设置动态侧边栏，侧边栏内容是从后端获取过来的

在Vue中设置动态侧边栏，可以使用Vue Router配合组件实现。具体步骤如下：

1. 在Vue项目中安装并引入Vue Router。

2. 创建一个侧边栏组件，可以在该组件中获取从后端传递过来的数据。

3. 在Vue Router中配置路由，将侧边栏组件设置为某个路由的component属性。

4. 在主组件中使用router-view标签，指定渲染的组件为侧边栏组件。

5. 在侧边栏组件中使用v-for指令循环遍历从后端获取的数据，并将数据渲染到侧边栏中。

示例代码如下：

// 侧边栏组件
<template>
  <div>
    <ul>
      <li v-for="item in sidebarList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sidebarList: [] // 从后端获取的侧边栏数据
    }
  },
  mounted() {
    // 在mounted钩子函数中获取后端数据
    // axios.get('/api/sidebar').then(res => {
    //   this.sidebarList = res.data
    // })
    // 假设从后端获取到的数据如下
    this.sidebarList = [
      { id: 1, name: '菜单1' },
      { id: 2, name: '菜单2' },
      { id: 3, name: '菜单3' }
    ]
  }
}
</script>

// Vue Router配置
import Vue from 'vue'
import Router from 'vue-router'
import Sidebar from '@/components/Sidebar'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Sidebar // 将侧边栏组件设置为路由的component属性
    }
  ]
})

// 主组件
<template>
  <div>
    <router-view></router-view> <!-- 使用router-view标签渲染侧边栏组件 -->
    <main>
      <!-- 主内容区域 -->
    </main>
  </div>
</template>

<script>
export default {
  // ...
}
</script>