Vuejs基础与应用开发实战（微课版） 单元7教案.pdfVIP

《Vue.js基础与应用开发实战(微课版)》配

套教学教案

单元7

课时内Vue路由配置与应用授课时间课时6

•掌握vue-router的基本使用

•掌握重定向和使用别名

•掌握根路径设置与使用

•掌握嵌套路由设置与使用

•掌握命名路由设置与使用

•掌握命名视图设置与使用

教学目标•掌握动态路由设置与使用

•掌握编式导航的实现

•熟悉导航钩子函数使用

•了解懒加载使用

•认知vue-router的API

•能实现用户登录与应用路由切换页面，基于“Vue.js+Axios+axios-mock-

ad叩ter”实现用户登录

教学重点vue-router的使用

教学难点vue-router的使用

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

教学设计

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

教学内

7.1vue-router的基本使用

通过vue-router可以实现当用户单击页面的A按钮时，页面显示对应的A内容；单击B按钮时，页面显

示对应的B内容。此时用户单击的按钮和页面显示的内容是映射的关系。

7.1.1安装vue-router

在使用vue・router之前，首先需要安装该插件，命令如下：

npminstallvue-router

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

importVuefromvue

importVueRouterfromvue-rouler

Vue.useVueRouter)

如果使用全局的script标签，则无须安装。

7.1.2使用vue-router

使用Vue配合vue-router创建SPA非常方便，使用Vue可以通过组合组件来组成应用程序，再把vue-

router添加进来，将组件(Components)映射到路由(Routes),然后告诉vue-router在哪里渲染它们。

【实例7-1]使用vue-router实现单击超链接显示对应的页面内

【操作要求】

使用vue-router实现当单击负面的【登录】超链接时，页面显亭对应的文本内“打开登录页面”；单击【注

册】超链接时，页面显示对应的文本内“打开注册页面”。

【实现过程】

创建网页0701.html,在该网页中编写以下代码实现要求的功能。

1)引入库

scriptsrc=vue.js/script

scriptsrc=vue-router.js/script

2)使用router-link组件实现导航

!-使用router-link组件来导航-

!-通过t。属性指定链接-