前端框架Vue学习 ——（七）Vue路由（Vue Router）

路由（Vue Router）"/>

前端框架Vue学习 ——（七）Vue路由（Vue Router）

文章目录

• Vue路由使用场景
• Vue Router 介绍
• Vue Router 使用

Vue路由使用场景

使用场景：如下图，点击部门管理的时候显示部门管理的组件，员工管理的时候显示员工管理的组件。

前端路由：指的是 URL 中的 hash(#号)与组件之间的对应关系。

Vue Router 介绍

介绍：Vue Router 是 Vue 的官方路由
组成：

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

Vue Router 使用

注意： 路由信息在 src/router/index.js 中配置

安装 Vue Router

要实现的效果

1. 在 router/index.js 中配置路由信息

2. 在相应的 views/tlias/DeptView.vue和EmpView.vue 中加路由链接组件

3. 在 App.vue 中加入路由展示组件