前端学习（十）导航栏功能优化

上篇实现了基本的导航栏功能，还有几个体验上的问题：

1. 首先他没法看出来当前选中了哪个页面，没点明显的提示
2. 只有点击文字才能路由，点边边那些位置是不行的
3. 过于简单，没有复杂的嵌套

本篇就改善这些问题。

解决第二个点击文字才能路由的问题

查着查着资料，发现第二个问题先解决。原来el-menu自带有router属性，设置该属性后就能自己路由了，不需要再引入router-link，所以代码改成下面这样：

<template>
  <div id="app" style="margin: 0">
    <el-menu router background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item class="menuItem" index="/">首页</el-menu-item>
      <el-menu-item class="menuItem" index="/FirstPage">第一个页面</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<el-menu>里面加个router，然后子页面就会将index认为是路由的路径，所以直接将index设置为路径值即可。这样既简化了代码，又解决了只能点击文字跳转的问题，这下点边边也能跳转了。

解决第一个选中没效果的问题

这个就靠加属性mode=“horizontal”，以及active-text-color="#ffd04b"指定颜色，就可以达到效果：

<template>
  <div id="app" style="margin: 0">
    <el-menu :default-active="$route.path" router mode="horizontal" background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item class="menuItem" index="/">首页</el-menu-item>
      <el-menu-item class="menuItem" index="/FirstPage">第一个页面</el-menu-item>
      <el-menu-item class="menuItemLogin">
        <!--        <LoginView></LoginView>-->
      </el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

除了新增上述的两个属性值外，我还额外加了:default-active="$route.path"，这个就是设置当前选中的页面，而$route.path就是就是获取当前的router路径，当我们首次进入网页时，路径就是localhost:8080这样，它对应的便是路径“/”，而我们首页的index正是“/”，所以首次进入网站，选中的便是“首页”，这个功能正好符合我们的需求。

这样的还有个好处是当我们在网页中使用router-link去跳转，而不是点击导航栏跳转时，导航栏的选中效果也会跟随变化。

增加子菜单丰富导航栏

现在我将新增的界面都放在子菜单里例如：

<template>
  <div id="app" style="margin: 0">
    <el-menu :default-active="$route.path" router mode="horizontal" background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item class="menuItem" index="/">首页</el-menu-item>
      <el-submenu index="1">
        <template v-slot:title>新增的页面</template>
        <el-menu-item class="menuItem" index="/FirstPage">第一个页面</el-menu-item>
        <el-menu-item class="menuItem" index="/FirstPage/SecondPage">第二个页面</el-menu-item>
      </el-submenu>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

其实就是多了一层el-submenu，就是注意v-slot:title，还可以写成#title。