7-3 7.8实现编程式导航ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《7-3 7.8实现编程式导航ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《7-3 7.8实现编程式导航ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、7-3 7.8 实现编程式导航教学课件 Vue.js基础与应用开发实战（微课版）7.8 实现编程式导航除了使用创建a标签来定义导航链接，这种方式属于声明式导航，Vue还可以借助router的实例方法，通过编写JavaScript代码来实现地址的跳转。7.8.1 使用router.push(location)方法实现导航使用router.push()方法可以导航到不同的URL地址，这个方法会向history栈添加一个新的记录，所以，当用户单击浏览器后退按钮时，则回到之前的URL。7.8.1 使用router.push(location)方法实现导航当单击时，router.push()方法会在内部

2、调用，也就是说，单击声明式导航 等同于调用编程式导航router.push()。在click中，用$router表示路由对象，在methods方法中，用this.$router表示路由对象。该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：/先获取router实例var router=new VueRouter()/字符串形式router.push(home)/对象形式router.push(path:home)/命名的路由router.push(name:user,params:userId:123)/带查询参数，变成/user?id=2router.push(path:use

3、r,query:id:2)在参数对象中，如果提供了path，params会被忽略，为了传参数，需要提供路由的name或者手写带有参数的path。1query方式传参使用query方式传递的参数会出现在地址栏中，例如“0706.html#/user?name=admin”，尾部的“?name=admin”就是query参数。【实例7-6】实现query方式传递参数【操作要求】编写程序实现query方式传递参数。【实现过程】创建网页0706.html，在该文件中编写代码实现要求的功能。扫描二维码查看【电子活页7-7】中网页0706.html的代码或者从本单元配套的教学资源中打开对应的文档查看相应内

4、容。打开网页0706.html后单击【跳转】按钮时，HTML将被渲染为：跳转 用户名：admin【实现过程】浏览网页0706.html时，显示一个【跳转】按钮，单击该按钮其下方显示“用户名：admin”内容，如图7-7所示。同时传递的参数“?name=admin”会出现地址栏中。图图7-7 浏览网页浏览网页0706.html时单击【跳转】时单击【跳转】按钮其下方显示按钮其下方显示“用户名：用户名：admin”内容内容2params方式传参params方式传递的参数不会出现在地址栏中，例如“0707.html#/user”，尾部就不会出现参数“?name=admin”。【实例7-7】实现para

5、ms方式传递参数【操作要求】编写程序实现params方式传递参数。【实现过程】创建网页0707.html，在该文件中编写代码实现要求的功能。扫描二维码查看【电子活页7-8】中网页0707.html的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。打开网页0707.html后单击【跳转】按钮时，HTML将被渲染为：跳转 用户名：admin【实现过程】浏览网页0707.html时，显示一个【跳转】按钮，单击该按钮其下方显示“用户名：admin”内容，如图7-8所示。而传递的参数“?name=admin”不会出现地址栏中。图图7-8 浏览网页浏览网页0707.html时单击【跳转】按时单

6、击【跳转】按钮其下方显示钮其下方显示“用户名：用户名：admin”内容内容7.8.2 使用router.replace(location)方法实现导航router.replace()方法与router.push()方法类似，区别在于，为设置replace属性后，当单击时，就会调用router.replace()方法，导航后不会向history栈添加新记录，而是替换掉当前的history记录。示例代码如下：/编程式router.replace(path:user)/声明式7.8.3 使用router.go(n)方法实现导航router.go()方法的参数是一个整数，表示在history历史记录中向前或者后退多少步，类似window.history.go(n)。例如：/在浏览器记录中前进一步，等同于history.forward()router.go(1)/后退一步记录，等同于history.back()router.go(-1)/前进3步记录router.go(3)/如果history记录不够用，就静默失败router.go(-100)router.go(100)快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！