Vue--整體頁面布局

前戲

前面我們已經寫好了登錄頁面，當正常登錄后應該跳轉到首頁

我們的頂部導航欄和左側導航欄一般是固定的，我們可以布局成下面的樣式

整體項目布局

因為我們的首頁是個公共的組件，點擊會員管理，供應商管理都不會變，所以我們可以放在components 下面，在下面創建一個 Layout.vue 的文件，寫入如下內容

<template>
  <div>
      <div class="header">頭部</div>
      <div class="navbar">左側區域</div>
      <div class="main">主區域</div>
  </div>
</template>

然后再router下的index.js里導入路由，新增了第七行和19，20，21行

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'
Vue.use(Router);


export default new Router({
      routes: [
        {
          path: '/login',
          name: 'login', // 路由名稱
          component: Login // 組件對象
        },
        {
          path: '/',
          name: 'layout', // 路由名稱
          component: Layout // 組件對象
        },
        
      ]
});

然后我們正常登錄，就可以看到首頁了

這樣當然是很難看的，我們可以在上面的基礎上寫上面和左邊的導航欄

CSS樣式實現布局

在 Layout.vue下實現頭部樣式，左側樣式，主區域，代碼如下

<template>
  <div>
      <div class="header">頭部</div>
      <div class="navbar">左側區域</div>
      <div class="main">主區域</div>
  </div>
</template>

<style scoped>
  /* 頭部樣式 */
  .header {
    position: absolute;
    line-height: 50px;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #2d3a4b;
  }
  
  /* 左側樣式 */
  .navbar {
    position: absolute;
    width: 230px;
    top: 50px;  /* 距離上面50像素 */
    left: 0px;
    bottom: 0px;
    overflow-y: auto; /* 當內容過多時y軸出現滾動條 */
    background-color: #545c64;
  }
  
  /* 主區域 */
  .main {
    position: absolute;
    top: 50px;
    left: 230px;
    bottom: 0px;
    right: 0px;  /* 距離右邊0像素 */
    padding: 10px;
    overflow-y: auto; /* 當內容過多時y軸出現滾動條 */
    /* background-color: red; */
  }
  </style>

重新訪問頁面，布局如下

主區域，左側區域，頭部區域，我們不可能都放在 Layout.vue 里面，這樣代碼就顯得冗余了，可以在 components 下面新建三個文件夾，分別為 AppHeader，Appmain，Appnavbar，里面各鍵一個index.vue 文件，如下，Appmain下的 Link.vue 先不用管它

然后我們把 Layout.vue 里的下面三行代碼抽取出來放到對應的index.vue里面

<div class="header">頭部</div>
<div class="navbar">左側區域</div>
<div class="main">主區域</div>

例如AppHeader下的index.vue里面

<template>
  <div class="header">頭部</div>
</template>

這樣我們提取出來了，需要在Layout下引用，代碼如下

<template>
  <div>
    <!-- 使用子組件,使用-，不建議使用駝峰 -->
    <app-header></app-header>
    <app-navbar></app-navbar>
    <app-main></app-main>
  </div>
</template>

<script>
  // 會導入./AppHeader下面的index.vue組件
  import AppHeader from "./AppHeader"
  import AppNavbar from "./AppNavbar"
  import AppMain from "./AppMain"

  // 導入子組件，縮寫格式 AppHeader: AppHeader
  export default {
    components: { AppHeader, AppNavbar, AppMain }  // 有s
  };
</script>

<style scoped>
  /* 頭部樣式 */
  .header {
    position: absolute;
    line-height: 50px;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #2d3a4b;
  }
  
  /* 左側樣式 */
  .navbar {
    position: absolute;
    width: 230px;
    top: 50px;  /* 距離上面50像素 */
    left: 0px;
    bottom: 0px;
    overflow-y: auto; /* 當內容過多時y軸出現滾動條 */
    background-color: #545c64;
  }
  
  /* 主區域 */
  .main {
    position: absolute;
    top: 50px;
    left: 230px;
    bottom: 0px;
    right: 0px;  /* 距離右邊0像素 */
    padding: 10px;
    overflow-y: auto; /* 當內容過多時y軸出現滾動條 */
    /* background-color: red; */
  }
  </style>

刷新我們的頁面，頁面還是之前的樣式，則我們的抽取沒有問題