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>
複製代碼