最简单的导航栏学习跳转实例效果：
（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>
最简单的导航栏配置如上图所示，项目中的文件结构如下所示
