電商後臺管理系統的功能——頁面的整體佈局

1.整體佈局

整體佈局：先上下劃分，再左右劃分。

需要使用到ElementUI中提供的Container元件

<el-container>
    <!-- 頭部區域 -->
    <el-header></el-header>
    <el-container>
        <!-- 側邊欄區域 -->
        <el-aside></el-aside>
        <!-- 右側主體區域 -->
 

        <el-main></el-main>
    </el-container>
</el-container>

2.左側選單佈局

選單分為二級，並且可以摺疊。

需要使用到ElementUI中提供的NavMenu導航選單

<el-menu>
    <el-submenu>
        <!-- 這個 template 是一級選單的內容模板 -->
        <i class="el-icon-menu"></i>
        <span>一級選單</
 
span>
        <!-- 在一級選單中，可以巢狀二級選單 -->
        <el-menu-item>
            <i class="el-icon-menu"></i>
            <span slot="title">二級選單</span>
        </el-menu-item>
    </el-submenu>
</el-menu>

3.通過介面獲取選單資料

需要授權的API，必須在請求頭中使用Authorization欄位提供token令牌。

// axios請求攔截
axios.interceptors.request.use(config => {
    // 為請求頭物件，新增 Token 驗證的 Authorization 欄位
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

在入口檔案main.js中設定請求攔截器，為每一個請求新增一個請求頭

config物件的內容如下：

獲取左側選單：

左側選單的UI繪製：

所有的一級選單都放到了data陣列中，因此menulist陣列中的每一項都是一個一級選單。所有一級選單中的children屬性又嵌套了二級選單。所以如果需要繪製左側選單，只需要使用雙層for迴圈即可，外層for迴圈用來渲染一級選單，內層for迴圈用來渲染二級選單。

出現一個bug，就是任意點開一個一級選單，所有的一級選單都會被展開

而我們的需求是：點選一個一級選單，只展開當前的選單，不影響其他的選單

這個bug產生的原因是因為所有的一級選單的index都是相同的，因此每個一級選單都應該有一個唯一的index值。

解決辦法：將item.id的值動態繫結給index（:index）

但是報了另一個錯：因為index只能接收字串，不接收數值，而item.id是數值型別的，最簡單的方法是給item.id拼接上一個空字串

修改一級選單的字型圖示：

可以看到上面的每個一級選單的圖示都不一樣，還是使用第三方的字型圖示庫

如何才能將這幾個字型圖示按照順序加過去呢？每一個一級選單都是通過for迴圈自動生成的，如何在自動生成期間修改不同圖示呢？

解決方案：先定義一個字型圖示的物件，在這個物件中，以一級選單的id作為key，字型圖示當作值

優化選單欄：當前n多個選單都可以被同時展開，但是實際上我們的需求是，每次只允許展開一個選單，展開當前選單，其他選單預設都會被關閉。

如何實現呢？

注意：如果要寫成=“true”的形式，則一定要繫結屬性，否則就是字串形式了:unique-opened="true"

另一個小細節：如何解決展開項沒有對齊的問題呢？

左側選單摺疊和展開功能：

如果是摺疊狀態，則側邊欄的寬度為64px，展開的情況下是200px

4.動態渲染選單資料並進行路由控制

• 通過 v-for 雙層迴圈分別進行一級選單和二級選單的渲染
• 通過路由相關屬性啟用選單的路由功能
  

<el-menu router>
    <el-submenu :index="item.id + ''" v-for=“item in menus" :key="item.id">
        <template slot="title">
            <span>{{item.authName}}</span>
        </template>
        <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" >
            <span slot="title">{{subItem.authName}}</span>
        </el-menu-item>
    </el-submenu>
</el-menu>

建立Welcome.vue元件，在Home頁面中放一個路由佔位符，然後將Welcome路由設定為home路由的子路由規則。這樣就在Home頁面中巢狀顯示了Welcome子元件。

將左側選單改為路由連結：開啟路由，則點選選單欄會跳轉到index所對應的值上

但是拿id作為跳轉地址並不合適，所以不能使用item.id來動態繫結index，而是使用path，但是每一個路由地址必須以‘/’開頭，所以path的值前面需要加一個‘/’