【融职培训】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文件

跳转页面

路由嵌套

路由传参

四、编程式导航

五、导航守卫

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

六、课后练习

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

系统包括三个页面，首页、学生列表页、登录页。

访问首页或学生列表页，如果未登录，直接跳转到登录页。

登录后跳转到首页

首页和学生列表页游公共的菜单，可以相互跳转。

【融职教育】在工作中学习，在学习中工作