《Vue企业开发实战》电子教案7-页面间导航

《网站开发技术（VUE）》·教案7第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目3大觅项目的路由配置授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目3的任务3。掌握router.push、replace、go等编程式导航，完成大觅主要页面可按路由切换、导航正确。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3页面间导航router.push；router.replace；router.go；在列表进详情、返回、支付等场景中的选用教材3.3三、学情分析学生已能用router-link切换页面，但业务里“选座后进确认页、支付成功不能回退到表单”需要编程式控制。本课要求能按场景选用push/replace/go。四、教学目标（一）知识目标1.掌握push、replace、go的含义与差别。2.理解编程式导航与声明式导航的分工。3.了解向路由传递params/query的基本写法。（二）能力目标1.能在按钮点击中调用push进入详情。2.能用replace避免返回到中间页。3.能用go实现前进后退。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点push与replace的差异演示历史记录能否返回难点带参数跳转先query后params，对照地址栏六、教学方法与准备方法：场景驱动、对比演示、理实一体。导入用“支付成功后按返回又回到填写页”，新授按push/replace/go推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入提问：确认订单后跳支付，用户按浏览器返回是否应回到未提交表单？引出replace。讨论购票路径上哪些步不能随便回。用业务规则定义导航API的选用。明确学习目标出示目标：三种方法会选、会写，大觅主路径可走通。对照目标勾画。强调不是多记几个函数名。任务3导航API演示push打开详情，replace替换历史，go(-1)返回。结合列表→详情→确认→支付说明选用。简介query传id。填一张“场景-方法”对照表。先场景后API，降低死记。上机练习在作业要求下：默认首页；导航可点；按钮控制push/replace/go。对照教材图示检查。完成综合导航并互测返回行为。用可演示主路径作为项目3达标。小结与作业回扣：link负责菜单，push/replace负责流程。预告项目4认识Vue3实例与数据。保存工程。结束路由项目，转入核心语法。课堂检测：①push和replace对历史记录有何不同？②支付成功页适合用哪种跳转？③go(-1)与go(1)分别做什么？八、上机任务与评价练习任务要求合格标准常见问题上机1列表按钮push进入详情，可返回历史记录行为正确写成location.href整页刷新上机2流程中某步使用replace；实现前进后退按钮返回不会落到被替换页；go有效replace用错步骤、未取router实例过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.完成教材路由综合练习：默认首页，单击导航切换。2.在作业1基础上添加按钮控制页面间导航。书面作业：用表格列出大觅购票主路径每一步建议的导航方式；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：______________________________