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

《网站开发技术（VUE）》·教案6

第PAGE页

一、基本信息

课程名称

网站开发技术（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.能配置重定向到首