示例：点击左侧的导航栏，地址栏只是#/后边的内容发生变化，这是通过路由功能实现的。 

 

 一、vue路由的官方介绍

二、vue路由的三部分组成 

 1）安装路由

 创建项目时，勾选路由选项。（或者通过命令安装）

 2）路由表的配置：

vue项目中的 src/router/index.js文件中修改路由表。

在main.js文件中，使用路由

3）router-link 路由链接组件

 三、通过Vue的路由VueRouter完成左侧菜单栏切换页面效果

效果如上图，目前已通过element的布局，完成了包含head  aside  main 三部分的布局。其中head 及左侧的aside 在部门和员工组件中都保持不变，不修改代码，只修改main部分的内容，完成页面切换。 

 1）在vue项目中的views目录中，创建自定义的组件（页面）

可以首先创建EmpView.vue,然后直接在左侧导航栏里拷贝粘贴一份为DeptView.vue。

在DeptView.vue中修改相应的结构主体。（如上图笔误，修正。） 

 2）在路由表中配置路由

两种配置路由方式：

方式一：先导入组件

 

 方式二：不需要导入组件

 2）为部门管理和员工管理两个按钮加上路由链接

在DeptView.vue和 EmpView.vue两个组件中分别加上路由链接（类似超链接，所以需要在各自的页面中添加）

同样，在EmpView.vue组件中，同样的位置，也加上路由链接。 

  

 4）更新路由

无路由的情况参考这篇文章：

前端工程化-vue项目开发流程-CSDN博客

 

将图1中的组件注释掉，只需添加<router-view></router-view>标签即可。 emp和dempt组件都不用写了。

初始页面的显示配置：默认显示的 #/ 路径。

两种方式：

一是可以直接配置 / 路径的组件。 

二是重定向路径（常用，简单）