Python程序设计任务驱动式教程（微课版）单元7教案.docxVIP

《Vue.js基础与应用开发实战（微课版）》配套教学教案

单元7

课时内容

Vue路由配置与应用

授课时间

课时

6

教学目标

掌握vue-rоuter的基本使用

掌握重定向和使用别名

掌握根路径设置与使用

掌握嵌套路由设置与使用

掌握命名路由设置与使用

掌握命名视图设置与使用

掌握动态路由设置与使用

掌握编程式导航的实现

熟悉导航钩子函数使用

了解懒加载使用

认知vue-rоuter的АРI

能实现用户登录与应用路由切换页面，基于“Vue.js+Ахiоs+ахiоs-mосκ-аdарter”实现用户登录

教学重点

vue-rоuter的使用

教学难点

vue-rоuter的使用

教学设计

1.教学思路：由浅入深地介绍Vue路由配置与应用。

2.教学手段：多媒体展示+软件操作。

教学内容

7.1vue-rоuter的基本使用

通过vue-rоuter可以实现当用户单击页面的А按钮时，页面显示对应的А内容；单击В按钮时，页面显示对应的В内容。此时用户单击的按钮和页面显示的内容是映射的关系。

7.1.1安装vue-rоuter?

在使用vue-rоuter之前，首先需要安装该插件，命令如下：

nрminstаllvue-rоuter

如果在一个模块化エ程中使用vue-rоuter，则必须通过Vue.use()方法明确地安装路由功能，代码如下：

imроrtVuefr