Vue--ElementUI實現頭部組件和左側組件效果

前戲

前面我們已經搭建好了首頁的一個大概樣式，現在我們就來使用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: '員工管理'}
              }
          ]
          
        }
        
      ]
});

這樣當我們點擊左側導航欄的時候，右邊都會加載對應的組件