项目实训 week1 侧边菜单栏和导航栏的初步编写

侧边菜单栏和导航栏的初步编写

侧边菜单栏

首先在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();
},

效果图

最后编写的结果如下：