最简单的导航栏学习跳转实例效果：

el-menu 导航栏学习（1）_el-menu

（1）index.js路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import NavMenuDemo from '@/components/NavMenuDemo'
import test1 from '@/components/test1'
import test2 from '@/components/test2'
import test3 from '@/components/test3'
Vue.use(Router)
export default new Router({
  routes: [{
    path: '/',
    name: 'NavMenuDemo',
    component: NavMenuDemo,
    children: [{
      path: '/test1',
      name: 'test1',
      component: test1
    }, {
      path: '/test2',
      name: 'test2',
      component: test2
    }, {
      path: '/test3',
      name: 'test3',
      component: test3
    },]
  }]
})

（2）NavMenuDemo.vue

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      router
      >
      <el-menu-item index="/test1"
        @click="$router.push({ path: '/test1' })"
      >
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="/test2"
        @click="$router.push({ path: '/test2' })"
      >
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="/test3"
        @click="$router.push({ path: '/test3' })"
      >
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<style>
  .el-aside {
    height: 100vh;
    text-align: center;
  }
  .el-main {
    background-color: #E9EEF3;
  }
</style>

（3）test1.vue

<template>
    <p>1</p>
</template>

（4）test2.vue

<template>
    <p>2</p>
</template>

最简单的导航栏配置如上图所示，项目中的文件结构如下所示

el-menu 导航栏学习（1）_ide_02