【融职培训】Web前端学习 第7章 Vue基础教程10 路由

一、路由概述

一个Web应用应该有多个页面，之前我们学习的Vue案例都是在一个页面完成的，通过路由，可以让应用在多个页面间跳转

（严格的说Vue是单页面应用，所以跳转的不是其他页面，而是其他组件）。

本章将会讲解路由的常用功能，关于更多的路由介绍，可以直接到Vue路由官网查阅

二、创建包括路由模块的Vue项目

首先使用下面命令创建一个带路由的项目:

vue create RouterProject

├─src
│ └─assets
│ │ └─logo.png
│ └─components
│ │ └─HelloWorld.vue
│ views
│ │ └─About.vue
│ │ └─Home.vue
│ └─App.vue
│ └─main.js
│ router.js

• views目录包括两个视图组件，用来展示两个菜单跳转的不同页面
• router.js文件是路由配置文件，我们可以在其中设置更多的路由跳转。

三、配置router.js文件

跳转页面

路由嵌套

路由传参

四、编程式导航

五、导航守卫

1 const router = new VueRouter({ ... })
2 router.beforeEach((to, from, next) => {
3   // ...
4 })

六、课后练习

实现一个教务管理系统的登录功能，要求如下：

1. 1. 系统包括三个页面，首页、学生列表页、登录页。
   2. 访问首页或学生列表页，如果未登录，直接跳转到登录页。
   3. 登录后跳转到首页
   4. 首页和学生列表页游公共的菜单，可以相互跳转。