項目進行到后臺部分了，在這里整理下后臺導航欄菜單路由的跳轉詳解。

項目環境：項目環境：vue + vue-cli + element-ui

附最終效果圖：

image.png

1、整體布局

我這里用的是element-ui組件中的布局容器Container ，鏈接如下
https://element.eleme.cn/#/zh-CN/component/container](https://element.eleme.cn/#/zh-CN/component/container

image.png

2、側邊導航欄

https://element.eleme.cn/#/zh-CN/component/menu
需求：當點擊左側導航時，右邊窗口顯示出對應的內容

• 1、代碼編寫

<el-menu :default-openeds="['1', '2']"  //默認進入后臺時，哪些導航是全部展開
               :default-active="this.$route.path" // 這里是指當前路由，這樣在路由變化的時候，對應的el-menu才會高亮。
               :router="true"  // 是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉
               background-color="rgba(52, 64, 88)" 
               text-color="white">  //導航欄字體顏色

        <!--左側項目-->
        <el-submenu index="1" >
          <template slot="title"><i class="el-icon-message"></i>項目</template>
          <el-menu-item-group>
//index：類型為字符串，在每一個el-menu-item組件上都有一個編號，給default-active標記
            <el-menu-item index="/home/unfinish">進行中</el-menu-item>
            <el-menu-item index="/home/finish">已完成</el-menu-item>
            <el-menu-item index="/home/create">創建項目</el-menu-item>
            <el-menu-item index="/home/search">搜索</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
</el-menu>

• 2、路由編寫
  在 router/index.js 文件中編寫路由，這里有父子路由之分，跳轉到后臺的 home 就是父路由，點擊導航菜單渲染出來的頁面文件是子路由。

import home from '@/views/backstage/home'  
import finish from '@/views/backstage/project/finish'
import unfinish from '@/views/backstage/project/unfinish'

      path: '/home',  // 后臺首頁home 
      name: 'home',
      component: home,    // 父路由
      children: [
        {
          path: '/home/unfinish',  // 項目 進行中
          name: 'unfinish',
          component: unfinish    // 子路由
        },
        {
          path: '/home/finish',  // 項目 已完成
          name: 'finish',
          component: finish   // 子路由
        }

image.png

注意：在每個子路由的跳轉路徑前，千萬千萬要加上父路由home在前面，否則將無法識別出正確的路徑。

3、右側主內容顯示窗口

就是路由跳轉到的頁面展示位置
后臺管理系統的整體布局內容是固定的，變化的只是當你點導航菜單時，渲染出相對應的內容而已，那么渲染出的內容在哪里展示？？
是由router-view決定的，如下，這個寫在哪里，跳轉出來的頁面在哪里展示，見上面布局顯示

  <el-main>
        <router-view></router-view>  // 很重要，千萬不要忘記
   </el-main>

導航菜單上的每一個加載渲染出來的頁面都需要單獨建一個文件，如果你不單獨分開頁面寫，當導航的內容特別多時， 你怎么辦？一個.vue文件要承受所有的渲染頁面內容，這將非常不利于你后期的修改及維護，并且容易出錯。

image.png

image.png

4、瀏覽器寬度變化時

• 1、布局錯位
  我在整體縮放渲染效果時，發現內容并不能隨著瀏覽器縮放（瀏覽器寬度變化）的大小而變化，而是發生了錯位和偏移，這時我們只需要在整體布局的最外層綁定一個class，然后設置一個 min-width 就可以解決這個問題了。

  但是在設置了 min-width 后，頂部有兩個功能按鈕還是會發生錯位，這兩個按鈕我最開始是采用padding/margin都不能解決問題，因為padding/margin設置后，他們的右邊始終有你設的多少像素。這時你給發生錯位的這兩個div的外層再包一層div，然后設置浮動left / right，就解決了。

image.png

       <div style="display: inline-block;float: right"> 
              <div class="class3"  >
                 <el-badge is-dot class="item"><i class="el-icon-bell"></i></el-badge>
              </div>
              <div class="class4" >
                  <el-dropdown style="align-items: center">
                     <span class="el-dropdown-link" style="color: white;">萬象<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>基本資料</el-dropdown-item>
                      <el-dropdown-item>修改密碼</el-dropdown-item>
                      <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
              </div>
         </div>


  css
 .class3{
    float: left;
  }
  .class4{
    float: right;
    margin-right: 30px;
  }

<template>
    <el-container class="wrap">
      <...>
   </el-container>
</template>


css
 .wrap{
    min-width: 1280px;
 }

image.png

• 2、element-ui組件樣式突然變大
  見下面的鈴鐺icon

  
  
  image.png
  
  

  原因是瀏覽器寬度變化時，element-ui的font-size突然變大，這個不是每個組件都會這樣，只有一些才會這樣，那么我們怎么解決呢？
  我們只需要給其固定的大小就不會發生這種情況了

//icon
<i class="el-icon-arrow-down el-icon--right"></i>
//icon css
.el-icon-arrow-down {
    font-size: 12px;
  }

image.png