側邊選單欄和導航欄的初步編寫

側邊選單欄

首先在componects/資料夾下建立新檔案NavgationMenu.vue

其中vue檔案template部分如下：

<template>
  <div id="NavigationMenu">
    <el-menu
        id="el-menu"
        default-active="2"
        :unique-opened="true"
        @select="menuSelect"
        background-color="#545c64"
        text-color="#fff"
        :router="true"
        active-text-color="#ffd04b">
      <el-submenu index="test">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>測試元件</span>
        </template>
        <el-menu-item index="/test/testComponent1">測試元件1</el-menu-item>
        <el-menu-item index="/test/testComponent2">測試元件2</el-menu-item>
      </el-submenu>
      <el-submenu index="null">
        <template slot="title">待編寫選單</template>
        <el-menu-item index="null ">待編寫子選單</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
 

採用element ui的el-menu元件，並使用router=true引數，表示使用 vue-router 的模式，啟用該模式會在啟用導航時以 index 作為 path 進行路由跳轉。

el-menu標籤下的el-menu-item標籤為子選單項，並支援無線巢狀。

導航欄

首先在componects/資料夾下建立新檔案HeaderBar.vue

其中vue檔案template部分如下：

<template>
  <div id="HeaderBar">
    <div id="left">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <!--        <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>-->
        <el-breadcrumb-item>首頁</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item,index) in this.menuRoutes" :key="index">{{ item }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div id="right">
      <div>待開發，留作登入登出及資訊顯示</div>
    </div>
  </div>
</template>
 

這裡使用element ui的el-breadcrumb元件，在傳入資料時，使用v-for解析$route物件中的meta資訊。

首先在watch中不斷監聽$route物件的變化

watch: {
  $route(val, oldVal) {
    let {meta} = val;
    let {title} = meta;
    this.menuRoutes = title.split("-").reverse();
  },
}

如果$route發生了變化，也就是路徑發生了變化，此時會拿到當前介面的title。

而在title中包含了這個元件的父子層級關係

{
  path:'test/testComponent1',
  name:'testComponent1',
  component:() => import('@/views/test/TestComponent1'),
  meta:{
    title:'測試元件1-測試元件',
  }
},
 

所以meta中title的資訊，我們可以通過"-"拆分成一個數組，傳遞給el-breadcrumb元件。

對於重新整理介面後的導航欄不顯示bug處理

因為元件中的監聽方法，只會在物件（即路徑）發生變化時呼叫，而直接通過瀏覽器重新整理路徑並沒有發生改變，所以不會呼叫watch中的監聽方法，所以需要在created()方法中進行處理

created() {
  let {meta} = this.$route;
  let {title} = meta;
  this.menuRoutes = title.split("-").reverse();
},

效果圖

最後編寫的結果如下：