vue中顶栏加侧栏布局怎么写

在 Vue 中实现顶栏加侧栏布局，可以通过使用组件和路由来实现。以下是一个简单的示例：

首先，在 App.vue 文件中，我们可以定义一个顶栏组件和一个侧栏组件，然后在 template 中使用它们：

<template>
  <div id="app">
    <navbar></navbar>
    <div class="content-wrapper">
      <sidebar></sidebar>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
import Sidebar from './components/Sidebar.vue'

export default {
  name: 'App',
  components: {
    Navbar,
    Sidebar
  }
}
</script>

在上面的代码中，我们使用了两个组件，一个是 Navbar 组件，一个是 Sidebar 组件，并将它们放置到了 App.vue 的 template 中。

接下来，我们可以在 router/index.js 文件中设置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在上面的代码中，我们定义了两个路由，一个是 `/` 路由，对应 Home.vue 组件，另一个是 `/about` 路由，对应 About.vue 组件。

最后，在 Sidebar.vue 组件中，我们可以添加一些链接，用来访问不同的路由：

<template>
  <div class="sidebar">
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Sidebar'
}
</script>

在上面的代码中，我们使用了 `<router-link>` 组件来创建路由链接，当用户点击链接时，会自动跳转到相应的路由。

这样，我们就完成了一个简单的顶栏加侧栏布局。当用户访问不同的路由时，会在侧栏中显示相应的链接，并在主区域中显示相应的内容。