《Vue企业开发实战》电子教案6-Vue Router基本使用

《网站开发技术（VUE）》·教案6第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目3大觅项目的路由配置授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目3的任务2。在dm工程中安装VueRouter，建立路由器模块并启动，配置重定向、懒加载和router-link，认识路由对象属性。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2VueRouter基本使用安装；建立路由器模块；启动路由器；重定向；懒加载；router-link；路由对象属性教材3.2三、学情分析学生已理解前端路由并有路径草案，但尚未在工程里落地。容易漏在main.js中use(router)，也容易把所有页面写成同步import。本课要求路由能切换，首页能重定向，列表页能懒加载。四、教学目标（一）知识目标1.掌握VueRouter4的安装与路由器模块组织。2.理解重定向、懒加载和router-link的作用。3.了解路由对象常用属性（path、params、query等）。（二）能力目标1.能创建router模块并在应用中启动。2.能配置重定向到首页。3.能用懒加载注册页面组件，并用router-link完成导航。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点路由器模块与app.use(router)对照main.js逐步引入重点重定向与懒加载先写同步，再改()=>import()难点路由未生效的排查清单：安装、创建、use、router-view六、教学方法与准备方法：演示+仿写、理实一体。导入用路径草案，新授按“安装→模块→启动→重定向→懒加载→link”推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入打开上次的路径草案。提问：这些path如何变成可点的导航？说明本课把草案写成可运行路由。打开dm工程。用学生自己的草案增强目的性。明确学习目标出示目标：工程可按路由切换，首页重定向有效。对照目标勾画。用可观察结果当达标线。任务2配置讲解演示安装、src/router/index.js、createRouter/createWebHistory、app.use。讲redirect、懒加载、router-link与router-view。简介route.params与query。跟做文件结构，标记易漏的use和view。把配置链条一次走完，减少碎片感。上机练习完成安装与启动；默认进入首页；至少一个页面懒加载；导航用router-link。巡视未加router-view、history写错。独立配置并点击切换。一次课拿到可演示的多页面壳。小结与作业回扣配置链条。预告push/replace/go编程式导航。保存工程。为作业中的综合导航打底。课堂检测：①路由器如何挂到应用上？②懒加载怎么写？③没有router-view会出现什么现象？八、上机任务与评价练习任务要求合格标准常见问题上机1安装并启动VueRouter，配置首页重定向打开站点落到首页，地址与path一致未use(router)、redirect写错上机2至少两个页面用懒加载，导航使用router-link点击导航切换组件，控制台无报错漏router-view、import路径错误过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.默写路由器安装到启动的步骤。2.说明为何列表/详情适合懒加载。书面作业：根据大觅路径草案补全路由表初稿；下次课用于编程式导航。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_______________________