Vue后台管理开发之侧边栏(初稿)

实现思路

由于后台管理中侧边栏和顶部栏都是一直存在，只有内容区域跟随路由变化而变化，因此这里用一个 Layout 组件，而子路由的内容显示在 Layout 的 中，这样就能够只让内容发生改变

• App.vue

<div id="app">
    <router-view/>
</div>
复制代码

• router.js

{
  path: '/',
  name: 'home',
  redirect: '/home',
  component: Layout, // 导入组件 Layout
  hidden: true,
  children: [{
    path: '/home',
    // 引入的组件会渲染到 Layout 中的 <router-view />
    component: () => import('@/views/Home.vue')
  }]
}
复制代码

• Layout.vue

在这里的 Layout 中，我进一步将侧边栏，顶部栏以及 <router-view /> 区域拆分，<router-view /> 放在单独的 AppMain.vue 中，目的是为了使 <router-view /> 单独定制

<div class="app-wrapper">
    <!-- <sidebar class="sidebar-container"></sidebar> -->
    <!-- <navbar></navbar> -->
    <app-main></app-main>
</div>
复制代码

• AppMain

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>
复制代码