《Vue.js基础与应用开发实战（微课版） 单元7教案.docx》由会员分享，可在线阅读，更多相关《Vue.js基础与应用开发实战（微课版） 单元7教案.docx（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Vue. js基础与应用开发实战（微课版）配套教学教案单元7leftJeftNav,课时内容Vue路由配置与应用授课时间课时6教学目标 掌握vue-router的基本使用 掌握重定向和使用别名 掌握根路径设置与使用 掌握嵌套路由设置与使用 掌握命名路由设置与使用 掌握命名视图设置与使用 掌握动态路由设置与使用 掌握编程式导航的实现 熟悉导航钩子函数使用 了解懒加载使用 认知 vue-router 的 API 能实现用户登录与应用路由切换页面，基于“ Vue.js+Axios+axios-mock- ad叩ter”实现用户登录教学重点vue-router 的使用教学难点vue-router 的使
2、用教学设计1 .教学思路：由浅入深地介绍Vue路由配置与应用。2 .教学手段：多媒体展示+软件操作。教学内容7.1 vue-router的基本使用通过vue-router可以实现当用户单击页面的A按钮时，页面显示对应的A内容；单击B按钮时，页面显 示对应的B内容。此时用户单击的按钮和页面显示的内容是映射的关系。7.1.1 安装 vue-router在使用vuerouter之前，首先需要安装该插件，命令如下：npm install vue-router如果在一个模块化工程中使用vue-router,则必须通过Vue.use。方法明确地安装路由功能，代码如下：import Vue from vue
3、import VueRouter from vue-routerVue.use(VueRouter)如果使用全局的script标签，则无须安装。main:mainContent ）这里使用复数components ,第一个属性与router-view中的name对应，第二个属性表示要展示的组件名称 !）；【实例7-5】设置与使用命名视图【操作要求】定义header （头部区域 left （侧边栏）和main （主体内容）3个命名视图，创建一个包含3个区域的 布局。【实现过程】略打开网页0705.html时，HTML将被渲染为：head 头部区域 v/divleft 侧边栏 main 主体内容v
4、/div包含命名视图的网页0705.html的浏览效果如图所示。leftSt边栏main主体内西包含命名视图的网页0705.html的浏览效果7.7 设置与使用动态路由经常需要把某种模式匹配到的所有路由全都映射到同一个组件。例如有一个User组件，对于所有id各不 相同的用户，都要使用这个组件来渲染。那么，可以在vue-router的路由路径中使用动态路径参数（Dynamic Segment）给路径的动态部分匹配不同的id来达到这个效果，示例代码如下所示：const user = template: User）const router = new VueRouter（routes:/动态路径参
5、数id以冒号开头 path: 7user/:id, component: user!)上述代码中,:id表示用户ID ,它是一个动态值。如果写成path: 7user/:id?, name:user, componentuser形式，path:7user/:id?表示有没有子路径都可以 匹配。需要注意的是，动态路由在来回切换时，由于它们都是指向同一组件，因此Vue不会销毁再重新创建这个 组件，而是复用这个组件。也就是说，当用户第一次单击(如useri )时，Vue把对应的组件渲染出来，然后 在use门、user2之间来回切换时，这个组件不会发生变化。如果想要在组件来回切换时进行一些操作，那就
6、需要在组件内部利用watch。方法来监听$route的变化。可以在一个路由中设置路径参数，路径参数使用冒号:标记。当匹配到一个路由时，参数值会被设置到 this.$route.params ,可以在每个组件内使用。这样就可以更新Use的模板，输出当前用户的id。【示例】demo0704.html略打开网页demo0704.html时，HTML将被渲染为：/user/admin/user/better 使用params方式传递参数的网页浏览效果如图所示。ZusZdoiiQZuZb!leL一的用户：admin使用params方式传递参数的网页浏览效果可以在一个路由中设置多段路径参数，对应的值都会设
7、置到$route.params中。除了$route.params外，$route对象还提供了其他有用的信息，例如$route.query (如果URL中有 查询参数X $route.hash等。7.8 实现编程式导航通过使用创建a标签来定义导航链接，这种方式属于声明式导航，Vue还可以借助router的 实例方法，通过编写JavaScript代码来实现地址的跳转。7.8.1 使用 router.push(location)方法实现导航使用router.push。方法可以导航到不同的URL ,这个方法会向history栈添加一个新的记录，所以当用户 单击浏览器后退按钮时，会回到之前的URLo当单
8、击时，router.push()方法会在内部调用，也就是说，单击声明式导航router-link等同于调用编程式导航router.push(.)o在36中，用$router表示路由对象；在methods下的方法中，用this.$router表示路由对象。该方法 的参数可以是一个字符串路径，或者是一个描述地址的对象。例如：先获取router实例var router=new VueRouter()II字符串形式router.push(home)/对象形式router.push( path: home)/命名的路由router.push( name: user, params: userid: 12
9、3)II带查询参数，变成/user?id=2router.push( path: user, query: id: 2)在参数对象中，如果提供了 path , params会被忽略，为了传递参数,需要提供路由的name或者手写带 有参数的patho1 .使用query方式传递参数使用query方式传递的参数会出现在地址栏中，例如0706.html#/user?name=admin ,尾部 的？name=admin 就是 query 参数。【实例7-6】使用query方式传递参数【操作要求】编写程序使用query方式传递参数。【实现过程】略打开网页0706.html后，单击【跳转】按钮，HTML
10、将被渲染为：button跳转/button用户名：admin 浏览网页0706.html时，页面中显示一个【跳转】按钮。单击该按钮，其下方显示“用户名：admin”内容， 如图所示，同时传递的参数？name=admin会出现在地址栏中。用户名：admin单击【跳转】按钮，其下方显示“用户名：admin”内容2 .使用params方式传递参数使用params方式传递的参数不会出现在地址栏中，例如0707.html#/user ,尾部就不会出现参 数？name=admin。【实例77】使用params方式传递参数【操作要求】编写程序使用params方式传递参数。【实现过程】略打开网页0707.ht
11、ml后，单击【跳转】按钮，HTML将被渲染为：button,跳转/button用户名:admin 浏览网页0707.html时，页面中显示一个【跳转】按钮。单击该按钮，其下方显示“用户名：admin”内容， 如图所示。而传递的参数？name=admin不会出现在地址栏中。用户名：admin单击【跳转】按钮其下方显示“用户名：admin”内容7.8.2 使用 router.replace(location)方法实现导航router.replace。方法与router.push。方法类似，区别在于为设置replace属性后，单击时会调 用router.replace()方法,导航后不会向histo
12、ry栈添加新记录，而是替换掉当前的history记录。示例代码如下：编程式 router.replace( path: user) 声明式7.8.3 使用router.go(n)方法实现导航router.go()方法的参数是一个整数，表示在history历史记录中前进或者后退多少步，类似 window.history.go(n)o例如:II在浏览器记录中前进一步，等同于history.forward() router.go(1)II后退一步记录，等同于history.back() router.go( -1)II前进3步记录 router.go(3) /如果history记录不够用，就静默失败
13、 router.go( - 100) router.go(IOO)7.9使用导航钩子函数vue-router提供的导航钩子函数主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航 发生时执行钩子函数：全局导航钩子函数、单个路由独享的导航钩子函数或者组件内的导航钩子函数。7.9.1 全局导航钩子函数可以使用router.beforeEach()方法注册一个全局的before钩子函数，例如： const router = new VueRouter(.)router.beforeEach(to, from, next) = II.)当一个导航触发时，全局的before钩子函数按照创建顺序
14、调用。钩子函数是异步解析执行的，此时导航在 所有钩子函数执行完之前一直处于等待中。每个钩子函数接收以下3个参数。to: Route ,即将要进入的目标路由对象。from: Route ,当前导航正要寓开的路由。next: Function ,一定要调用next。函数来执行这个钩子函数，执行效果依赖next。函数的调用参数。下面是next。函数传递不同参数的情况。next。：执行管道中的下一个钩子函数。如果全部钩子函数执行完了，则导航的状态就是confirmed(确 认的卜next(false):中断当前的导航。如果浏览器的URL改变了(可能是用户手动改变或者单击了浏览器后 退按钮)，那么URL
15、会重置到from路由对应的地址。next)或next(path:7):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。同样可以注册一个全局的after钩子函数，不过它不像before钩子函数那样，after钩子函数没有next()函 数，不能改变导航，例如：router.afterEach(route = 11.1.)【示例】demo0705.html略打开网页demo0705.html时，HTML将被渲染为：主页商品详情打开网站主页浏览使用全局导航钩子函数的网页，单击【购物车】超链接时，其下方显示文本内容请登录”，如图所示。主页商品详情购物车请登杲单击【购物车】超链接时其下方显
16、示文本内容“请登录”单个路由独享的导航钩子函数可以在路由配置上直接定义beforeEnter钩子函数，例如：const router = new VueRouter(routes: (path: /login,component: Login,beforeEnter: (to, from, next) = II.)这些钩子函数与全局before钩子函数的参数是一样的。组件内的导航钩子函数可以在路由组件内直接定义以下路由导航钩子函数，例如：beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeaveconst Login = templat
17、e:beforeRouteEnter (to, from, next) II在渲染该组件的对应路由被确认前调用，不能获取组件实例this ,因为在钩子执行前，组件实例还没被创建).beforeRouteUpdate (to, from, next) II在当前路由改变但是该组件被复用时调用).beforeRouteLeave (to, from, next) II导航寓开该组件的对应路由时调用，可以访问组件实例this)beforeRouteEnter钩子函数不能访问this ,因为钩子函数在导航确认前被调用，而即将登场的新组件还没 被创建。不过，可以通过传一个回调函数给next来访问组件实例
18、。在导航被确认的时候执行回调函数，并且把 组件实例作为回调函数的参数。例如:beforeRouteEnter (to, from, next) next(vm = /通过vm访问组件实例)可以在beforeRouteLeave中直接访问this ,这个leave钩子函数通常用来禁止用户在还未保存修改前突 然离开。可以通过next(false)方法来取消导航。7.10 使用懒加载当打包构建应用时，JavaScript包会变得非常大，从而影响页面加载。如果能把不同路由对应的组件分割 成不同的代码块，然后在路由被访问的时候才加载对应组件，这样执行起来就更加高效了。结合Vue的异步组 件和webpac
19、k的代码分割功能，可以轻松实现路由组件的懒加载。首先，可以将异步组件定义为返回一个Promise的工厂函数，该函数返回的Promise应该是resoh/e组件 本身。例如：const Login = () = Promise.resolve(芦 组件定义对象 */)在webpack 2中，使用动态import语法来定义代码分块点(split point卜例如：import(./Login.vue) / returns a Promise结合这两者，这就是如何定义一个能够被webpack自动代码分割的异步组件。例如：const Login = () = import(./Login.vue)在路
20、由配置中什么都不需要改变，只需要像往常一样使用Login ,例如：const router = new VueRouter(routes: path: /login, component: Login )有时候想把某个路由下的所有组件都打包在同一个异步块(chunk )中，只需要使用命名chunk即可，一 个特殊的注释语法来提供chunk name (需要webpack 2.4卜例如：const Login = () = import。* webpackChunkName: group-login */ ./Login.vue)const Register = () = import(/* w
21、ebpackChunkName: group-login / ./Register.vue)const Home = () = import(/* webpackChunkName: group-login / ./Home.vue)webpack会将任何一个异步模块与相同的块名称组合到相同的异步块中。7.11 vue-router 的 API7.11.1 router-link组件支持用户在具有路由功能的应用中实现导航，通过to属性指定目标地址，默认渲染成带有 正确链接的标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一 个表示激活的CSS类名。比好一些
22、，无论是history模式还是hash模式，它的表现行为一致，所以当切换 路由模式，或者在IE9降级使用hash模式时，无须做任何变动。在HTML5 history模式下，router-link会拦截 单击事件，让浏览器不再重新加载页面。在HTML5 history模式下使用base选项之后，所有的to属性都不需要 写基路径了。(1 ) to(required)to(required)表示目标路由的链接。当被单击后，内部会立刻把to的值传到router.push()方法，所以这个 值可以是一个字符串或者是描述目标位置的对象。例如:HomeHome(2 ) replace设置replace属性的
23、话，当单击时，会调用router.replace()方法而不是router.push。方法,于是导航后不 会留下history记录，例如：(3 ) append设置append属性后，则在当前(相对)路径前添加基路径。例如，从/a导航到一个相对路径b ,如果没 有设置append属性，则路径为/b ,如果设置了 append属性，则路径为/a/b。例如:(4 ) tagtag的默认值为ao有时想要渲染成某种标签，例如o于是使用tag prop类指定何种标 签，同样它还是会监听单击事件，触发导航。例如：loginlogin(5 ) active-classactive-class用于设置链接激活
24、时使用的CSS类名，默认值可以通过路由的构造选项linkActiveClass来 全局配置。(6 ) exact是否激活默认类名的依据是inclusive match (全包含匹配b如果当前的路径是/a开头的，那么也会被设置CSS类名。按照这个规则，将会点亮各个路由。想要链接使用“exact 匹配模式”，则使用exact属性。例如:(7 ) eventsevents的默认值为click ,用于声明可以用来触发导航的事件，可以是一个字符串或是一个包含字符串的 数组。7.11.2 router-view组件是一个实用组件，渲染路径匹配到的视图组件。渲染的组件还可以内嵌自 己的 ,根据嵌套路径，渲染
25、嵌套组件。组件的name属性默认值为default。如果设置了名称，则会渲染对应的路由配置中components下的相应组件。因为router-view也是个组件，所以可以配合trans计ion和keep-alive使用。如果两个结合一起用， 要确保在内层使用keep-alive ,例如：应用实故【任务71】实现用户登录与应用路由切换页面【任务描述】创建Vue项目cased-login ,要求该项目实现以下功能。项目启动时，首先显示登录页面，在登录页面中输入有效的用户名和密码，如图所示。用户名 admin在登录页面中输入有效的用户名和密码登录成功后，显示“登录成功”的提示信息，然后进入主页面，
26、如图所示。Welcome to Your Vue.js App显示“登录成功”的提示信息 在文件夹components中新建所需的组件Content.vue ,该组件中通过参数msg传递文本内容。在文件夹views中新建所需的功能页面About.vue和Home.vue ,在文件Home.vue中引用组件 Content ,将文本内容“Welcome to Your Vue.js App”传递给参数 msg0用户登录成功后，进入主页面，该页面有【主页】和【关于我们】两个超链接，单击【主页】超链接，在 页面中显示文本内容“Welcome to Your Vue.js App,即参数msg中传递的
27、文本内容，如图所示。 kxalhott:8081/homeV * X：）Welcome to Your Vue.js App项目case01-login主页面的浏览结果单击【关于我们】超链接，在页面中显示文本内容This is an about page,即About.vue文件的文本内容，如图所示。gI|- C locatiotfli/about V X j)主而1关干理们This is an about page项目caseOLIogin“关于我们”页面的浏览结果【任务实施】1 .开始创建Vue项目在命令行中执行以下命令创建Vue项目：vue create case01-login2 .准
28、备项目环境基于vue-cli脚手架创建项目，需要安装Node.js和全局安装vue-cli。 在命令行中执行以下命令安装element模块：npm i element-ui -S3 .在配置文件中完善各项配置默认的端口是8080 ,也可以更改端口，格式检查也是一件很麻烦的事情，可以关闭，这些都可以在 配置文件中进行配置，该文件代码如下：https: false./端口号，如果端口被占用，会自动加1/ 主机名,127.0.0.1 真机 /协议open: true,启动服务时自动打开洌览器访问lintOnSave: false./关闭格式检查module.exports = devServer:
29、port: 8081, host: localhost,productionSourceMap: false /打包时不会生成.map文件，加快打包速度 4 .在文件夹components中修改或新建所需的组件Content.vue略5 .在文件夹views中修改或新建所需的功能页面(1 )新建登录页面login.vue在views文件夹下新建一个登录页面login.vue ,再在该文件中输入模板代码。 略在文件login.vue中输入以下JavaScript代码：export default name: fisrtdemo*,data() return form: 7.1.2 使用 vue-
30、router使用Vue配合vue-router创建SPA非常方便，使用Vue可以通过组合组件来组成应用程序，再把vue- router添加进来，将组件(Components )映射到路由(Routes ),然后告诉vue-router在哪里渲染它们。【实例7-1使用vue-router实现单击超链接显示对应的页面内容【操作要求】使用vue-router实现当单击页面的【登录】超链接时，页面显示对应的文本内容打开登录页面”；单击【注 册】超链接时，页面显示对应的文本内容“打开注册页面”。【实现过程】创建网页0701.html ,在该网页中编写以下代码实现要求的功能。(1 )引入库 (2 )使用r
31、outer-link组件实现导航!-通过t。属性指定链接一!- 默认会被渲染成一个标签- 登录 注册 (3)添加路由出口!-路由匹配到的组件将渲染在这里(4 )如果使用模块化机制编程，需要先导入Vue和VueRouter这里不需要导入Vue和VueRouter,也不需要使用Vue.use(VueRouter),所以以下3行代码需添加注释 符号：II import Vue from vueII import VueRouter from vue-routerII Vue.use(VueRouter)(5)定义路由组件const Login = template: 打开登录页面const Regi
32、ster = template: 打开注册页面(6)定义路由II每个路由应该映射一个组件const routes = path: /login, component: Login, path: /register, component: Registername:, password: )；.methods: onSubmit() if (this.form.name = admin & this.form.password = 123456) this.$message(message:，登录成功，type: success)；this.Srouter.push( path: /Home);
33、else(登录失败)；)；(2)完善About.vue文件的代码文件夹views下About.vue文件的代码如下：This is an about page(3 )完善Home.vue文件的代码文件夹views下Home.vue文件的代码如下：import Content from /components/Content.vue;export default name: Home,components: Content,，；6 .完善文件夹router下index.js文件的代码 对文件夹router下index.js文件中的代码进行完善。 略7 .完善src文件夹中的App.vue文件 文
34、件夹src下App.vue文件的模板代码如下： 主页 | 关于我们 8 .完善main.js文件caseOl-loginsrcmain.js文件完善后的代码如下：import Vue from vue;import App from ./App.vue;import router from ./router;import ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css,;Vue.use(ElementUI);Vue.config.productionTip = false;console.log(pro
35、cess.env.Vue_APP_BASE_API)new Vue( router, render: (h) = h(App).$mount(#app);9 .完善 package.json 文件在package.json文件中找到scripts节点下的serve选项，在后面加上-open ,实现运行项目后自动打开 浏览器。scripts节点完整的代码如下：scripts: serve: vue-cli-service serve -open,build: vue-cli-service build, lint: vue-cli-service lint，10 .启动项目与浏览运行结果在cas
36、ed-login中执行以下命令，启动项目： npm run serve如果没有报错，自动打开了网页则项目配置成功。经测试实现了要求的功能。【任务7-3基于Vue.js+Axios+axios-mockadapte广实现用户登录【任务描述】创建基于“Vue.js+Axios+axios-mock-adapter”的项目case02-login ,该项目用于实现登录功能。项目case02-login启动成功后,打开浏览器,在地址栏中输入“http:ocalhost:后80/1,按Enter键, 即可看到登录页面，分别在文本框中输入用户名与密码，如图所示。用户登录ml ra记住用reset【用户登录
37、】页面单击【login】按钮，此时顺利打开图所示的项目主界面则表示登录成功。-4C kxalhort80W/home(B* !)成功登录，进入主界面项目主界面【任务实施】1 .开始创建Vue项目在命令行中执行以下命令创建Vue项目case02-login :vue create case02-login2 .完善项目的文件夹结构在本项目文件夹case02-login中创建子文件夹service ,在service文件夹中再创建子文件api和db03 .准备项目环境基于vue-cli脚手架创建项目，需要安装Node.js和全局安装vue-cli。在当前文件夹case02-login下执行以下命令
38、，分别安装Axios、Mock.js, axios-mock-adapter插件： npm install axio -savenpm install mockjd -save-devnpm install axios-mock-adapter -save-dev程序中插件的引入方法如下：第一种引入方式：按照ES6的语法，以import的方式引入，对应的语句如下：import axios from axios;import MockAdapter from axios-mock-adapter,;第二种引入方式：以require方式引入，对应的语句如下：var axios = require(
39、axios)；var MockAdapter = require(axios-mock-adapter);在命令行中执行以下命令安装element-ui :npm i element-ui -S程序中element-ui的引入方法如下： import ElementUI from element-ui;4 .创建文件与编写代码实现所需功能(1 )完善index.html文件的代码 略(2 )完善main.js文件的代码对文件夹src下main.js文件中的代码进行完善：import Vue from vue;import App from ./App.vue;import router from ./router;import store from ./store;import ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css;import axios from axiosimport Mock from ./mock/indexMock.init()“axios不能直接使用use引入，只能在每个需要发送请求的组件中即时引入 Vue.prototype.$ajax = axiosVue.use(ElementUI)Vue.config.productionTip =