我们常见的网站，页面的最上方都有个导航栏，例如CSDN的最上方的：
那我们也做一个这样的，首先element有这个控件“el-menu”，那我们就按照示例做一个样子出来，类似于这样：
导航栏一般是一直存在于整个网站，所以他的位置一定是放在最外层，那么就是放在app.vue，那么不管我们切换什么界面，他都一直存在。
原来我们App.vue里很简单：
<template><div id="app"><router-view></router-view></div></template>
其实就一个<router-view>，而位于最上层的导航栏，就是加在它的前面：
<template><div id="app" style="margin: 0"><el-menu background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item class="menuItem" index="1">首页</el-menu-item><el-menu-item class="menuItem" index="2">第一个页面</el-menu-item></el-menu><router-view></router-view></div></template><style>.menuItem {float: left;}</style>
其实里面样式的代码更多，style="margin: 0"就是为了让控件外边距为零，否则它不靠最上边，感兴趣可以删掉看看效果。这样就实现了导航栏的一个样子，以后我们的首页，第一页，第二页啥的，就通过导航栏去跳转了。
导航跳转
其实很简单，就是把<router-link>写到里面去：
<template><div id="app" style="margin: 0"><el-menu background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item class="menuItem" index="1"><router-link class="routerLink" to="/">首页</router-link></el-menu-item><el-menu-item class="menuItem" index="2"><router-link class="routerLink" to="/FirstPage">第一个页面</router-link></el-menu-item></el-menu><router-view></router-view></div></template><style>.menuItem {float: left;}.routerLink {color: white;text-decoration: none; /*去掉下划线*/}</style>
其实就是把<el-menu-item>给嵌套在里面即可，没啥变化，这样点击按钮就可以跳转到相应的界面了
