vue侧边栏导航,右侧显示对应内容

Vue.js中创建一个带有侧边栏导航和右侧内容区的布局通常涉及到组件化开发。你可以这样做：

1. **组件设计**：
- 创建两个基本组件：`SideNav`（侧边栏）和`ContentArea`（内容区域）。`SideNav`负责展示菜单项，而`ContentArea`接收动态的内容数据并渲染。

2. **路由管理**：
- 使用Vue Router对URL进行管理，每个菜单项对应一个路由路径。当用户点击菜单项，会触发导航到相应的页面。

<template>
  <div class="layout">
    <Sidebar :items="menuItems" />
    <router-view></router-view>
  </div>
</template>

<script>
import Sidebar from './components/SideNav.vue';
import ContentArea from './components/ContentArea.vue';

export default {
  components: { Sidebar, ContentArea },
  data() {
    return {
      menuItems: [
        // 你的菜单项配置
      ]
    };
  }
};
</script>

3. **父子组件通信**：
- 在`SideNav`中添加一个事件处理器，比如`@selectItem`，当用户选择一项时，通过`this.$emit('select-item', item)`将选中的项传递给父组件。

4. **ContentArea 组件**：
- 接收`select-item`事件，并在内部处理路由跳转，如 `this.$router.push(item.route)`, 将选中的菜单项对应的路由地址传入。

<!-- SideNav.vue -->
<template>
  <ul>
    <li v-for="item in items" @click="selectItem(item)">
      {{ item.label }}
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    selectItem(item) {
      this.$emit('select-item', item);
    }
  }
};
</script>