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>
複製程式碼