前戲

前面我們已經搭建好了首頁的一個大概樣式，現在我們就來使用ElementUI搭建頭部元件的效果

頭部元件

程式碼如下

AppHeader/index.vue

<template>
  <!-- logo和文字 -->
  <div class="header">
    <a href="#/">   <!-- 點選進入首頁 -->
      <img class="logo" src="@/assets/Logo1.png" width="25px" />
      <span class="company">鄒鄒管理系統</span>
    </a>
  <!-- logo和文字結束 -->


  <!--  下拉選單-->
<el-dropdown @command="handleCommand"><!--  繫結指令,在methods裡定義-->
    <span class="el-dropdown-link">
      您好
      
 
<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
        <!-- icon是修改圖示 ，command是點選後傳給方法的值-->
      <el-dropdown-item icon="el-icon-edit" command="edit">>修改密碼</el-dropdown-item>

      <el-dropdown-item icon="el-icon-s-operation" command="quit">>退出登入</el-dropdown-item>
      
    </el-dropdown-menu>
</el-dropdown>
  <!--  下拉選單結束-->


  </div>

</template>

<script>
  export 
 
default {
    methods: {
      handleCommand(command){
        this.$message(`點選了${command}`)
      }
    },
  }
</script>

<style scoped>
/* logo */
.logo {
  vertical-align: middle; /* 居中 */
  padding: 0px 10px 0px 40px; /* 上右下左 */
}

/* 文字 */
.company {
  position: absolute;
  color: white;
}

/* 下拉選單 
 
*/
.el-dropdown{
    float: right; /* 浮動在右邊 */
    margin-right: 40px; /* 靠右40px */
}
/* 系統管理 */
.el-dropdown-link{
    color: white;
    cursor: pointer; /* 滑鼠放上去是手的形狀 */
}
</style>

重新整理頁面

左側區域

直接在AppNavbar裡面寫如下程式碼

<template>  <!-- 使用element的導航選單 -->
  <div class="navbar">
    <!--default-active預設選中的選單，選中後顏色是 active-text-color  -->
    <!--  :router='true',true表示開啟路由模式，開啟之後，index值代表的就是路由地址-->
    <!--  :router='true'開啟之後點選就會跳轉到對應的路由，預設為false -->
    <!-- text-color 文字的顏色 -->
    <el-menu :router='true' default-active="/home" class="el-menu-vertical-demo" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b">

      <!-- 首頁  class就是對應的icon -->
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首頁</span>
      </el-menu-item>

      <!-- 會員管理 index下的左右 / 別忘記-->
      <el-menu-item index="/member/">
        <i class="el-icon-s-custom"></i>
        <span slot="title">會員管理</span>
      </el-menu-item>

      <!-- 供應商管理 -->
      <el-menu-item index="/supplier/">
        <i class="el-icon-menu"></i>
        <span slot="title">供應商管理</span>
      </el-menu-item>

      <!-- 商品管理 -->
      <el-menu-item index="/goods/">
        <i class="el-icon-suitcase-1"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>

      <!-- 員工管理 -->
      <el-menu-item index="/staff/">
        <i class="el-icon-user"></i>
        <span slot="title">員工管理</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>


<style scoped>
  /* 去掉右邊框 */
  .el-menu {
    border-right: none;
  }
</style>

重新整理頁面，左邊的選單欄就出來了

這樣左側我們也做好了，但是點選左邊的選單會進入一個空白頁面，因為我們開啟了路由但是沒有配置，比如點選商品管理會出現下面的空白頁

其他元件

上面我們已經寫好了左側導航，並且點選能跳轉到對應的路由，接下來我們來寫對應的元件，我們把元件都放在src下的views下面，分別為商品（goods），首頁（home），會員（member），員工（staff），供應商（supplier），如下

每個index.vue裡都寫右側的程式碼，只需要把文字替換即可

首頁路由配置

上面我們點選左側的首頁會跳轉到空白頁面，我們已經寫好了首頁，會員，商品，供應商的元件（views下的）。我們期望的是當我們點選左側對應的導航，對應的元件渲染在Layout的中間區域。

首頁，會員，商品，供應商的元件都是Layout的一個子元件，我們可以放在children下面，在src/router/index.js裡配置首頁的路由，程式碼如下

import Vue from "vue";
import Router from "vue-router";
// import Login from '@/views/login/index'

// 下面的情況，預設會匯入@/views/login下的index.vue元件
import Login from '@/views/login'
import Layout from '@/components/Layout'
import Home from '@/views/home'
Vue.use(Router);


export default new Router({
      routes: [
        {
          path: '/login',
          name: 'login', // 路由名稱
          component: Login // 元件物件
        },
        {
          path: '/',
          name: 'layout', // 路由名稱
          redirect: '/home', // 當訪問 / 時重定向到 home
          component: Layout , // 元件物件
          // 因為首頁，商品，會員都是 Layout 下的 main 裡的，所以要將這些元件作為 Layout 元件的子元件，使用children，裡面是一個數組，接收一個個物件
          // meta 是
          children: [
            {
              path: '/home',
              component: Home,
              meta: {title: '首頁'}
            }
          ]
        },
        
      ]
});

路由我們配置好了，當我們點選首頁的時候右邊出現的還是之前在AppMain下的index.vue下寫的，如下

這是因為我們沒有寫元件的出口，更改AppMain下的index.vue程式碼，如下

<template>
  <div class="main">
    <router-view> </router-view> <!-- 元件的出口 -->
  </div>
</template>

這樣當我們點選首頁的時候會把views/home/index.vue裡的內容渲染到AppMain下的index.vue

走通所有導航

上面我們已經寫了個首頁的導航，我們是在Layout元件下寫了個children，還有一種其他的方法，是和Layout元件同級

src/router/index.vue 程式碼如下

import Vue from "vue";
import Router from "vue-router";
// import Login from '@/views/login/index'

// 下面的情況，預設會匯入@/views/login下的index.vue元件
import Login from '@/views/login'
import Layout from '@/components/Layout'
import Home from '@/views/home'
import Member from '@/views/member'
import Goods from '@/views/goods'
import Staff from '@/views/staff'
import Supplier from '@/views/supplier'
Vue.use(Router);


export default new Router({
      routes: [
        {
          path: '/login',
          name: 'login', // 路由名稱
          component: Login // 元件物件
        },
        {
          path: '/',
          name: 'layout', // 路由名稱
          redirect: '/home', // 當訪問 / 時重定向到 home
          component: Layout , // 元件物件
          // 因為首頁，商品，會員都是 Layout 下的 main 裡的，所以要將這些元件作為 Layout 元件的子元件，使用children，裡面是一個數組，接收一個個物件
          // meta 是
          children: [
            {
              path: '/home',
              component: Home,
              meta: {title: '首頁'}
            },
            // {
            //   path: '/member',
            //   component: Member,
            //   meta: {title: '會員管理'}
            // },
          ]
        },

        
        // 上面的是一種寫法，可以放在children下面，還有一種方法是下面的這種
        // 當訪問 /member 時，渲染的是 Layout 元件，


        {
          path: '/member',
          component: Layout,
          children: [
            {
              path: '/', // 等價於 /member/,請求 /member 時會在後面拼接個 / 因為AppNavbar下的index.vue寫的是/member/
              component: Member,
              meta: {title: '會員管理'}
            }
          ]
        },
        {
          path: '/supplier',
          component: Layout,
          children:[
              {
                path: '/',  
                component: Supplier,
                meta: {title: '供應商管理'}
              }
          ]
          
        },
        {
          path: '/goods',
          component: Layout,
          children:[
              {
                path: '/',  
                component: Goods,
                meta: {title: '商品管理'}
              }
          ]
          
        },
        {
          path: '/staff',
          component: Layout,
          children:[
              {
                path: '/',  
                component: Staff,
                meta: {title: '員工管理'}
              }
          ]
          
        }
        
      ]
});

這樣當我們點選左側導航欄的時候，右邊都會載入對應的元件