目录

概述

介绍

使用

解决bug

---

概述

员工管理的页面已经制作完成。其他页面的制作方式一致。

项目中准备了部门管理的页面组件 DeptView ，这样就有了员工管理和部门管理两个页面组件。

在系统中，要实现点击部门管理菜单展示部门管理组件，点击员工管理菜单展示员工管理组件的功能，需要用到 Vue 中的路由功能。

引入前端路由功能后，点击左侧菜单栏时（部门管理、员工管理），浏览器地址栏变化，路由会自动更新显示与 URL 对应的组件。

前端路由指的是 URL 中的哈希与组件之间的对应关系，比如 “#/dept” 中的 “/dept”。

介绍

Vue路由

在 Vue 中使用路由，可以使用 Vue 官方提供的核心插件 Vue Router ：

Vue Router

• 介绍：Vue Router是Vue的官方路由。
• 组成：
  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>：请求链接组件，浏览器会解析成<a>
  • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

介绍完 Vue 的路由后，其使用方式如下：

使用

①、安装 Vue Router   我们创建 Vue 项目时已勾选路由功能，所以项目中已有。

npm install vue-router@3.5.1

②、在 router 文件夹下的 index.js 中定义路由表，记录 URL 哈希与组件的对应关系。在原有的项目中已自动配置了路由样例，可在此基础上改造，配置 Dept 和 Emp 两个组件的路由信息。

③、路由信息配置好后已生效，项目创建时在 main.js 入口文件中已将路由信息导入并使用。

配置好路由后，要实现点击左侧部门管理访问部门管理页面组件，点击员工管理菜单访问员工管理页面组件的案例，需要使用 router-link 标签在左侧菜单中指定访问的组件，点击部门管理代表访问 “#/dept” 路由，通过 Vue Router 自动找到对应组件，并在对应区域通过 router-view 展示。 

首先在左侧菜单中加上 router-link 标签，指定访问的路由，

然后在 APP.view 中加上 router-view 标签动态展示对应组件。

解决bug

基础路由功能实现后，项目存在小 bug ，项目启动后默认访问的路由路径是 “#/”，但系统中配置的路径只有 “#/emp ” 和 “#/dept”，访问 “#/” 找不到对应组件。

解决方法是再配置一个路径 “#/”，使用 redirect 属性重定向到 “#/dept” 路径，这样访问 “#/” 时会重定向到 dept 页面。

---

END

---

学习自：黑马程序员——JavaWeb