Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)

传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)

传送门：Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)

本文主要介绍导航菜单的配置以及导航栏跳转路由（vue路由实现页面跳转）的方法。

---

目录

一、 导航菜单配置

二、 路由跳转

2.1 页面配置

2.2 菜单配置

2.3 路由配置

2.4 main.js配置

---

 

一、 导航菜单配置

elementui导航栏 使用这个官网demo即可，可以结合 页面布局 将导航栏配置在左侧边栏。对于导航栏展开后子菜单会多出一点点的问题，可以通过配置如下样式解决：

.el-menu{
    border-right-width: 0;
}

二、 路由跳转

vue导航栏跳转路由 这篇文章大部分内容都做了介绍，缺失main.js中的配置，这里进行如下补充。

2.1 页面配置

【4：新页面的内容】是【1：components 新建页面】中的内容。

 

2.2 菜单配置

【2：打开app.vue 写代码】是直接在app.vue入口里写的菜单配置，在el-menu中，router 后边的 mode="horizontal"无需配置（否则导航栏格式可能混乱？）。

我们也可以把菜单抽