vue管理後臺

手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)
基於這篇文章的學習，開始動手寫了一個簡易的vue管理後臺。主要頁面如下

• 登錄

• 主頁 （頁面的結構基本和主頁相同。左側導航欄，右側上方麪包屑導航和用戶頭像，右側下方大塊空白區域對應的是各路由）

• 項目結構

views:各業務組件
components:公共組件(麪包屑,導航開關等等）
api: 請求的js文件
icons: svg和相關配置文件（此項目的圖標是使用svg-sprite-loader來實現的， 之前寫過的相關文章鏈接
permission.js 檢查權限
其他地方與別的項目結構一致，我就不再贅述了。

1.實現頁面的結構。

（因爲除了login等特殊頁面外,其他的結構都是一致的。所以可以用Layout組件來承載頁面的結構）
@/views/Layout/的目錄結構如下

對應到Layout的各個區域如下圖。

• @/router/index.js 路由器。

當點擊切換路由時，sidebar和navbar不會改變，只有app-main組件的內容會改變。
實現思路:左側導航欄的路由的component爲Layout,再通過router的redirect屬性控制顯示app-main區域的路由。部分代碼如下

@/Layout/Layout.vue

<template>
    <div class="app-wrapper" :class="classObj">
        <!--導航 -->
        <sidebar/>
        <!--麪包屑-->
        <div class="main-container">
            <!-- 頭部導航 -->
            <navbar/>
            <!-- 二級路由 -->
            <app-main/>
        </div>
    </div>
</template>
<script>
import Sidebar from './components/Sidebar'
import Navbar from './components/navbar'
import AppMain from './components/AppMain'
</script>

@/Layou/components/AppMain.vue

<template>
    <section class="app-main">
        <transition name="fade-transform" mode="out-in">
            <!-- 在這裏映射不同的路由到Layout中的app-main -->
            <router-view/>
        </transition>
    </section>
</template>

2.左側導航

左側的導航是通過element-ui的 el-menu組件和循環路由表來實現的。具體效果如下圖

如果沒有子路由，點擊直接跳轉。有則出現下拉彈框。

3.麪包屑導航

使用的也是element-ui裏的el-breadcrumb組件

.....未完待續.....