Vue--整體頁面佈局

阿新 • • 發佈：2020-08-12

前戲

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

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

整體專案佈局

因為我們的首頁是個公共的元件，點選會員管理，供應商管理都不會變，所以我們可以放在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行

 1 import Vue from "vue";
 2 import Router from "vue-router";
 3 // import Login from '@/views/login/index'
 4 
 5 // 下面的情況，預設會匯入@/views/login下的index.vue元件
 6 import Login from '@/views/login'
 7 import Layout from '@/components/Layout'
 8 
 Vue.use(Router);
 9 
10 
11 export default new Router({
12       routes: [
13         {
14           path: '/login',
15           name: 'login', // 路由名稱
16           component: Login // 元件物件
17         },
18         {
19           path: '/',
20           name: 'layout', // 路由名稱
21           component: Layout // 
 元件物件
22         },
23         
24       ]
25 });

然後我們正常登入，就可以看到首頁了

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

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>