《Vue.js3前端开发基础及项目化应用教案单元8路由管理——VueRouter.docx》由会员分享，可在线阅读，更多相关《Vue.js3前端开发基础及项目化应用教案单元8路由管理——VueRouter.docx（11页珍藏版）》请在课桌文档上搜索。
1、Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前开发基础及项化应用授课年级：授课学期：学年第一学期一教师找名：2023年09月09日课题名称单元6路由管理VueRouter计划学时6学时内容分析页面跳转是Web应用开发中的常见操作。在单页面应用普及的今天，页面跳转工作多交由前端完成,而Vue是单页面应用的常用开发框架。VUe采用的VueRouter允许使用不同的请求路径访问同一页面中不同的内容，以实现单页面应用程序中页面跳转的效果。本单元将介绍前端路由概念、VUeRoUter的安装和使用方法，通过路由属性定义路由方法，利用导航和导航守卫实现页面切换等内容。通过在“用户登录及注
2、册”任务中应用VueRouter,来帮助学习者深化前端路由概念的理解，更好地掌握VUeRoUter的应用。教学目标及基本要求1 .理解前端路由及相关概念2 .能够安装和使用VueRouter3 .能够定义和命名路由4 .能够实现动态路由5 .能够实现声明式和编程式导航6 .能够实现导航守卫教学重点L能够定义和命名路由2 .能够实现声明式和编程式导航3 .能够实现导航守卫教学难点能够实现导航守卫教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时（前端路由，路由管理器，VlIeRolIter的安装与使用）一、创设情境，引入路由和前端路由概念1 .教师通过应用场景描述，引出前端
3、路由和后端路由的对比。例如URL为http:/localhost:8090/myDemo/index.html#print表示将页面中id为print的元素所在的位置滚动到可视区域。浏览器会将URL|#后的部分解释为位置标识符，使得该请求不会被发送到服务器端。我们将#及其后面的字符称为Hash地址。前端路由是Hash地址与组件之间的对应关系。比如URL为httplocalhost:8090myDemouser7id=I表示访问服务器端的地址映射名为user的请求处理函数，且请求参数为id,后端路由是请求方法、请求地址与请求处理函数之间的对应关系。2 .明确学习目标。 了解路由、前端路由和后端路
4、由概念 了解路由管理器的工作机制 掌握VUeRouter的安装和使用方法二、进行重点知识的讲解1 .教师根据课件，通过介绍路由、前端路由和后端路由概念。（1）路由、前端路由和后端路由的含义路由可以理解为一种对应关系。它分为前端路由和后端路由。前端路由是在单页面应用中实现组件切换的方式。后端路由是请求方法、请求地址与请求处理函数之间的对应关系。（2）前端路由和后端路由的工作过程前端路由的工作过程是，每当用户单击页面链接时，会使得浏览器地址栏中Hash地址发生变化，当前端路由监听到该变化时，会将对应的组件渲染到页面的指定位置。后端路由的工作过程是每当地址栏中URL发生变化时，浏览器都会将该请求提交
5、到服务器端，由服务器端路由模块负责为其匹配到对应的请求处理函数，接着执行该请求处理函数，最后将结果页面渲染好并返回给前端。2 .教师根据课件，讲解路由管理器的工作机制。概念用途跖由（route）一个路由.定义一个对应关系/home=Home组件一组路由（routes）多个路由.定义多个对应关系组成的数组/home=Home组件),7abott,:About组件跖由管理器（router）包含一些操作路由的功能函数，用来实现编程式导航router.Push(Thome)/切换至Home线3.教师根据课件，讲解VueRoUter安装和使用方法，并使用代码进行演示。（1）使用CDN方式安装VUeRou
6、ter（2） VueRouter使用方法通过例8-1讲解VueRouler应用过程。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括路由、前端路由和后端路由的含义和作用，路由管理器的工作机制,VUeROUter的CDN安装方式，VueRouter的使用方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时（定义嵌套路由、命名路由，以及命名视图）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的
7、疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了路由、前端路由和后端路由的概念、路由管理器的工作机制，VueRouter的安装与使用方法。接下来，本节课将通过实例介绍路由属性的应用，包括定义嵌套路由、命名路由和命名视图。3 .明确学习目标。了解嵌套路由概念，学会嵌套路由的定义方法 了解命名路由概念，学会命名路由的定义方法 解命名视图概念，学会命名视图的定义方法二、进行重点知识的讲解1 .教师根据课件，介绍嵌套路由概念，以及嵌套路由实现的流程，并使用代码进行演示。（1）教师根据课件，讲解嵌套路由概念。在一个路由内包含其子路由，这种路由结构被称为嵌套路
8、由。（2）教师根据课件，讲解嵌套路由的定义方法，并使用代码进行演示。通过例8-2演示和讲解嵌套路由的定义和应用2 .教师根据课件，介绍命名路由概念，以及命名路由实现的流程，并使用代码进行演示。（1）教师根据课件，讲解命名路由定义方法，并使用代码进行演示。利用路由属性name为路由进行命名，这种路由被称为命名路由。（2）教师根据课件，讲解命名路由的定义方法，并使用代码进行演示。通过例8-3演示和讲解命名路由的定义和应用3 .教师根据课件，介绍命名视图概念，以及命名视图实现的流程，并使用代码进行演示。（1）教师根据课件，讲解命名视图概念。通过为RouterView命名，建立-一个路由与多个视图的对
9、应关系。这种被命名的RouterView组件为命名视图。（2）教师根据课件，讲解命名视图的定义方法，并使用代码进行演示。通过例8-4演示和讲解命名视图的定义和应用。三、归纳总结，布置课后作业1.回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的知识点，包括嵌套路由、命名路由和命Z,也念，以及嵌套路由、命冷咯由和命名视图的实现方法，并r解各自的应用场景。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（动态路由、路由传参、路由函数）一、回顾上节课内容
10、，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了通过实例介绍路由属性的应用，包括定义嵌套路由、命名路由和命名视图，接下来，本节课将介绍动态路由的实现方法，包括路由传参、路由函数。3 .明确学习目标。 了解动态路由概念 能够使用路由传参实现动态路由 能够使用路由函数实现动态路由二、进行重点知识的讲解1 .教师根据课件，讲解动态路由概念。动态路由是指路由配置能够根据功能逻辑的需要进行动态调整。2 .教师根据课件,讲解路由传参实现动态路由的方法,并使用代码进行演示（1）路由传参通过增加一个动态字段定义路由匹配模式
11、，从而构成一个带参的路由，利用传递参数的不同，可实现动态路由匹配。（2）使用案例讲解路由传参的实现3 .教师根据课件,讲解路由函数实现动态路由的方法,并使用代码进行演示。（1）路由函数动态更新路由发生在程序运行过程中，需要通过编程方式来实现。（2）使用案例讲解路由函数的实现。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括动态路由概念，动态路由应用场景，使用路由传参方式实现动态路由，使用路由函数方式实现动态路由。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的
12、问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（声明式导航、编程式导航、全局导航守卫、路由导航守卫）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了动态路由，包括动态路由概念，路由传参实现动态路由，路由函数实现动态路由。接下来，本节课将介绍导航和导航守卫，导航包括声明式导航、编程式导航，导航守卫包括全局、路由和组件三种，这里重点介绍前两种。3 .明确学习目标。 了解VUe中导航概念掌握声明式导航和编程式导航实现方法 掌握全局导航守卫和路由导航守卫实现方法二、进行重点知识的讲解1
13、 .教师根据课件，讲解VUe中导航概念。导航是指页面间的路由跳转操作。VueRouter支持声明式和编程式导航。2 .教师根据课件，讲解Vue声明式和编程式导航的实现，并使用代码进行演示。（1）声明式导航声明式导航采用RouterLink组件代替HTML的a链接定义导航链接。使用to属性指定路由，语法格式为：页面内容名称使用to属性绑定路由对象，语法格式为：routcr-link:to=页面内容名称（2）编程式导航编程式导航采用编程方式进行导航驱动。借助路由管理器实例的push和replace函数实现。3 .教师根据课件，讲解全局导航守卫和路由导航守卫的实现，并使用代码进行演示。（1）全局导航
14、守卫VueRouter提供的beforeEach和afterEach钩子函数，可用于实现全局前置守卫和全局后置守卫。全局前置守卫用于导航被触发前，全局后置守卫则用于导航被触发后。（2）路由导航守卫路由导航守卫仅有前置守卫，由VucRouter提供的beforeEnier钩子函数来实现。三、归纳总结，布置课后作业1.回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括导航概念和作用，声明式导航和编程式导航的实现方法，导航守卫概念和作用，全局导航守卫和路由导航守卫的实现方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的
15、掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。.第五课时（VueRouter在实际项目中的应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了VUe导航，包括声明式导航、编程式导航，导航守卫，包括全局导航守卫和路由导航守卫。接下来，本节课将通过实际应用项目，来帮助学习者进一步理解前端路由和路由管理器、VUe导航、导航守卫的概念，并掌握VUeROUter的应用方法。3 .明确学习目标。 理解VIleRoUter相关概念 掌握前端路由定义方法、路由管理器应用 掌握
16、声明式导航和编程式导航实现方法 掌握全局导航守卫实现方法二、进行重点知识的讲解1.教师根据课件，介绍项目8一一用户登录及注册的需求描述、实现思路和代码实现。（1）需求描述在历史名城游网站中，要求用户登录后才能进入主页，如果用户不存在，则要求先注册。（2）实现思路/将主页、登录和注册部分均构建成局部组件，作为根组件的子组件。/创建路由数组，包括主页、登录和注册路由。/创建路由管理器实例。定义全局导航守卫，将用户登录与否作为是否跳转到主页路由的条件，即当用户未登录时，跳转至登录路由；当用户登录成功时，则跳转至主页路由。/注册组件处理注册信息的录入和保存，并实现路由跳转逻辑：当用户注册成功时，保存用
17、户名和密码，并跳转到登录路由。/登录组件处理登录信息的录入和验证，并实现路由跳转逻辑：当用户登录成功时，跳转到主页路由，否则跳转到注册路由。（3）功能实现任务6-1构建页面头部布局任务6-2实现登录和注册功能三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括进一步理解前端路由在VUe应用中的作用，掌握路由定义，路由管理器应用，声明式导航和编程式导航，全局导航守卫的实现和应用过程。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的学握程明对学生出现的问题进行解决。3.使用在线学习平台下发课
18、后作业。.第六课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：请创建网站程序，其页面布局由头部导航栏和页面主体内容组成。导航栏包括一级菜单“首页”“科技”“关于我们”，“科技”包含二级菜单“探索”“应用”；对应菜单层次，创建顶级路由和子路由，以及对应的页面主体内容组件；实现各路由间的跳转操作，且跳转完成后页面主体内容更新为当前组件内容，页面标题更新为当前菜单名。形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和习题见教材单元8配套的习题教学后记
