《Vue企业开发实战》电子教案5-前端路由原理

《网站开发技术（VUE）》·教案5第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目3大觅项目的路由配置授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目3的任务1。理解路由、前端路由与使用场景，分清hash与history，为在大觅项目中引入VueRouter做准备。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1什么是前端路由路由概念；前端路由原理；hash/history；使用场景；与后端路由的差异教材3.1三、学情分析学生已能启动SPA工程，但多数人把“换页”理解成再请求一个html。本课要求能说清单页里如何靠URL切换视图，以及大觅为何需要前端路由。四、教学目标（一）知识目标1.理解路由是URL与视图的对应关系。2.掌握前端路由与后端路由的分工。3.了解hash与history两种模式及适用场景。（二）能力目标1.能根据大觅页面列出需要路由的路径。2.能用自己的话说明SPA中切换栏目为何不必整页刷新。3.能判断给定URL更像hash还是history。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点前端路由与SPA的关系对照项目1的SPA/MPA表，点菜单不闪白屏难点hash与history差异看地址栏#号，结合刷新、部署注意点讲解六、教学方法与准备方法：案例导入、对比讲解、列表梳理。导入用大觅首页点栏目，新授按“是什么→为何用→两种模式”推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入回顾大觅首页、列表、详情。提问：若每个栏目都是一个完整html，体验和维护有何问题？引出前端路由。回忆SPA局部刷新。用项目场景定义本课问题。明确学习目标出示目标：说清前端路由、能列大觅路径草案。对照目标勾画。本课先建立概念，安装配置留到下次。任务1原理讲解讲路由映射。对比后端根据路径返回页面、前端根据路径切换组件。介绍hash与history，说明刷新404、需要服务端配合等情况。列出票务、后台等使用场景。记录两种模式特点；给大觅草拟/home、/detail等路径。先地图后工具，避免一上来就记API。上机练习在纸面或文档中列出大觅主要页面与建议path，标明哪几个是父子级。小组互评是否覆盖购票主路径。完成路径表并抽组汇报。把原理立刻变成信息架构，为下次写路由表铺路。小结与作业回扣：前端路由服务SPA。预告安装路由器、重定向与懒加载。保存路径草案。概念课也要有产出物。课堂检测：①前端路由解决什么问题？②hash和history在地址栏上有何不同？③大觅从首页到详情建议用哪几个path？八、上机任务与评价练习任务要求合格标准常见问题上机1列出大觅主要页面与path草案，覆盖购票主路径路径表完整、命名合理、能口述对应关系漏支付/个人中心、写成.html文件名过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.用自己的话解释什么是前端路由。2.比较hash与history，各举一个注意点。书面作业：完善大觅路径草案，下次课用于配置路由表。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________