前端学习（九）页面导航栏页面最基本实现

我们常见的网站，页面的最上方都有个导航栏，例如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>给嵌套在里面即可，没啥变化，这样点击按钮就可以跳转到相应的界面了