这次的导航效果，包括二级导航，请认真食用~
先看下效果图吧

image.png

具体的步骤如下

1.安装element-ui

npm install element-ui --save
或
cnpm install element-ui --save

2.需要准备页面

如下图结构

image.png

修改项目创建后的起始页，也就是默认页=首页，
首页放在上图的index目录下
原先的app.vue中的基本不变：看下图

app.vue

image.png

但是<router-view />还是需要的，这是承接路由的节点

那么刚才说的起始页改变，也就是index目录中的indexView.vue变化，变成SPA(单页面应用)，

indexView.vue如下

image.png

这里的导航我写成了组件在components里面，如下

headView.vue

<template>
  <div class="container">
    <el-row class="head">
      <el-col class="colCell" :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
        <el-menu
          :default-active="this.$route.path"
          router
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <template v-for="(item, i) of navList">
            <el-menu-item v-if="!item.select" :key="i" :index="item.name">
              <template slot="title">
                <span>{{ item.navItem }}</span>
              </template>
            </el-menu-item>
            <el-submenu v-else :index="item.name" :key="i">
              <template slot="title">{{item.navItem}}</template>
              <el-menu-item v-for="(items, t) of item.children
              " :key="t" :index="items.name">{{items.navItem}}</el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>
      <el-col class="colCell login"> 登录 </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      navList: [
        { name: '/', select: false, navItem: '首页' },
        { name: '/test1', select: false, navItem: '发现项目' },
        { name: '/test2', select: false, navItem: '社区动态' },
        {
          name: '/work1',
          navItem: '我的工作台',
          select: true,
          children: [
            {
              name: '/work1',
              navItem: '工作台1'
            },
            {
              name: '/work2',
              navItem: '工作台2'
            },
            {
              name: '/work3',
              navItem: '工作台3'
            }
          ]
        }
      ]
    }
  },
  components: {},
  created () {
    // 初始化
  },
  mounted () {
    // 初始化完成
  },
  methods: {
    // 请编辑事件处理
    handleSelect (key, keypath) {
      console.log(key, keypath)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.el-menu-demo {
  width: 100%;
  display: flex;
  justify-content: center;
}
.head {
  width: 100%;
  height: auto;
  display: flex;
}
.login {
  flex: 1;
  display: flex;
  align-items: center;
  border-bottom: solid 1px #e6e6e6;
}
</style>

这是导航的代码，data里面的navList可以是接口请求的数据，跟后端协商数据格式就好，通过遍历实现,
还有通过路由来实现，要在<el-menu>里面写上

:default-active="this.$route.path"
 router

可以看上面完整代码

还有整体的路由的代码，一并贴上
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// import IndexView from '../views/index/indexView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('../views/index/indexView.vue'),
    children: [
      {
        path: '/',
        name: 'home',
        component: () => import('../components/home/homeView.vue')
      },
      {
        path: '/test1',
        name: 'test1',
        component: () => import('../views/test/test1View.vue')
      },
      {
        path: '/test2',
        name: 'test2',
        component: () => import('../views/test/test2View.vue')
      }
    ]
  },
  {
    path: '/',
    name: 'Index',
    component: () => import('../views/index/indexView.vue'),
    children: [
      {
        path: '/work1',
        name: 'work1-1',
        component: () => import('../views/work/work1View.vue')
      },
      {
        path: '/work2',
        name: 'work1-2',
        component: () => import('../views/work/work2View.vue')
      },
      {
        path: '/work3',
        name: 'work1-3',
        component: () => import('../views/work/work3View.vue')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

路由通过确定首页路由，其他路由通过子路由来实现，方便跟接口数据对应

其他页面代码大体如下：

image.png
image.png

代码基本就是这样的，需要注意的就是修改默认的起始页，也就是变成了indexView.vue 单页面的方式来实现，通过indexView作为首页，来通过接口和路由的对接来切换其他页面的数据。
还有一个就是路由文件的配置，大致是上面那样配置，时间多的可以去尝试修改完善一下~

后续如有改动会持续更新~~~~