20vue路由高级功能

课题第7章vue路由第三节vue路由的高级功能授课时间第九周教学目的掌握编程式导航了解导航守卫掌握嵌套路由教学重点掌握编程式导航掌握嵌套路由教学难点嵌套路由的使用教学过程教学环节教学内容教学方法、手段及时间分配课前提问导入新课讲授新课代码实践讲授新课代码实践总结课前提问：回顾上节课的内容，如基础路由配置、动态路由参数等。提问学生关于路由的基本概念，检查学生的掌握情况。导入：简要介绍本节课将要学习的内容：编程式导航、导航守卫和嵌套路由。强调这些高级特性对于复杂应用开发的重要性。第三节vue路由的高级功能一、编程式导航1）router.push在Vue实例内部，你可以通过router访问路由实例。因此你可以调用router.push。想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录。当你点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link:to="...">等同于调用router.push(...)。代码如下：1.router.push传参push中的参数可以是字符串（表示前往哪个路由页面），也可以是对象。例如：router.push(“home”);//字符串router.push({path:”home”});//对象router.push({name:”user”,params:{userid:123}}）；//命名的路由router.push({path：“login”,query:{plan:”private”}});注意：当有path参数的时候，params参数将会被忽略。2.router.replace跟router.push很像，唯一的不同就是，它不会向history添加新记录，而是跟它的方法名一样——替换掉当前的history记录。也就是说用户点击浏览器后退键的时候，它不会退回到跳转之前的页面。3.router.go(n)n=1(history.forward)n=-1(history.back)n=3（前进3步记录）n=100或者-100(如果记录不够，导航失败)这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。编程式导航，代码编写，学生仿照老师课堂演示的代码进行学习和理解。二、导航守卫：当用户在填写一项Form表单的时候，我们自然不希望用户还没有填写好就跳到其他的路由去，导航守卫给了我们可以判断用户是否可以跳转的能力。如同组件可以全局与局部注册一样，导航守卫也可以。三、嵌套路由要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置。在User组件（父路由）的模板添加一个<router-view>，这个元素就是其子路组件渲染的地方。嵌套路由，驾照系统代码编写，学生仿照老师课堂演示的代码进行学习和理解。总结课程中的内容。第一课时提问（5分钟）导入（5分钟）讲授（25分钟）实践（10分钟）第二课时讲授（25分钟）实践（15分钟）总结（5分钟）课堂小结作业课堂小结：通