Vue.js前端开发基础与实战（微课版）教案-教学设计 第10章 Vue Router单页面开发

Vue.js3.0从入门到实践教学设计课程名称：Vue.js3.0从入门到实践授课年级：授课学期：教师姓名：年月日 课程名称第10章 VueRouter单页面开发计划学时6内容分析在传统的Web页面中，不同页面间的跳转都是通过向服务器发起请求，服务器处理请求后向浏览器推送页面实现的，也就是使用超链接来实现不同页面间的切换和跳转。而在单页应用程序中，不同视图(组件的模板）的内容都渲染在同一个页面中，页面间的跳转则是在浏览器端完成的，也就是使用VueRouter实现不同组件之间的切换。VueRouter还具有一些高级功能，例如路由嵌套，路由传参和导航守卫等，这使得构建复杂的前端页面变得更加简便。本章重点介绍路由的分类、路由的基础知识和进阶知识。通过学习本章内容，读者可快速掌握VueRouter的使用方法，实现组件的切换。教学目标与教学要求【知识目标】理解路由的定义与分类掌握路由的安装与配置掌握嵌套路由、重定向与命名路由的用法掌握路由传参与编程式路由的用法掌握3种导航守卫与路由组合式API的用法【技能目标】能够正确安装与配置路由能够正确使用嵌套路由、重定向与命名路由能够正确使用路由的传参方式能够正确使用编程式路由能够正确使用3种导航守卫与路由组合式API【育人目标】培养学员在遇到问题时能够独立思考和查找解决方案的能力。强调代码审查的重要性，促进团队成员之间的知识分享和互相学习。教学重点路由的安装与配置创建第一个路由项目嵌套路由重定向与命名路由路由传参编程式导航实验：重构农产品后台管理系统页面导航守卫路由组合式API实训：蔬菜商品信息页面教学难点实验：重构农产品后台管理系统页面实训：蔬菜商品信息页面教学方式课堂讲解配合PPT演示教学过程第一、二课时（初识路由、路由的安装与配置、创建第一个路由项目、嵌套路由、重定向与命名路由）回顾内容回顾上节内容，引出本节内容回顾上节的内容，并提问学生上节练习中的问题，学生回答完后，由上节内容引出本节要讲的初识路由、路由的安装与配置、创建第一个路由项目、嵌套路由、重定向与命名路由等内容。明确学习目标理解路由的定义与分类掌握路由的安装与配置方式掌握创建第一个路由项目的方式掌握嵌套路由的使用方式掌握重定向与命名路由的使用方式知识讲解知识点1-初识路由路由的定义VueRouter能够根据不同的请求路径，切换显示不同组件进行渲染页面，从而实现更新视图无需重新请求页面。VueRouter本质上是在不同的请求路径（URL）与页面之间建立映射关系。路由的分类后端路由后端路由可用于处理客户提交的请求，其工作过程为——浏览器在地址栏中切换路径（URL）时，会向服务器发送请求，服务器响应后，根据请求路径找到匹配的函数来处理该请求，之后返回响应数据（页面）。前端路由前端路由可用于展示页面内容。其工作过程为——当浏览器的路径改变时，会根据路径显示对应组件。前端路由模式两种模式的对比知识点2-路由的安装与配置路由的安装路由有2种安装方式，第1种方式是使用CDN在页面中引入路由，具体代码如下所示。<scriptsrc="/vue-router@4"></script>第2种方式是使用NPM的方式安装路由，打开项目终端在项目根目录下执行如下命令。npminstallvue-router@4在VueCLI创建的项目中配置路由在VueCLI创建的项目中使用路由，可以在创建项目时选择配置路由，步骤如下。使用vuecreateproject命令创建一个名为“project”的项目，并使用方向键选择手动配置模版。进入配置项选择页面。创建一个具有路由功能的项目。在浏览器地址栏中输入“http://localhost:8080/”或“7:8080/”即可打开项目。知识点3-创建第一个路由项目使用VueCLI创建一个名为“poem_tab”的项目，并使用VueRouter实现项目中不同组件页面的切换。实现poem_tab项目的步骤如下。创建组件在项目的views文件夹下新建两个组件，分别命名为TangPoems和SongPoems。创建路由文件在项目router文件夹下的index.js文件中配置路由信息，步骤如下。首先，通过import语句从views文件夹中引入自定义组件。其次，定义路由，并在routes数组中配置映射关系。再次，通过createRouter()方法创建路由对象，在路由对象中配置routes。最后，通过export语句抛出路由对象。在App.vue中使用路由在App组件中使用路由，步骤如下。首先，在App组件中，编写页面的基本结构，在页面中添加一个导航栏用于切换唐诗和宋词的介绍页面。然后，使用<router-link>标签用于实现路由跳转，该标签默认会被渲染为一个<a>标签，标签中的to属性用于设置跳转地址。最后，使用<router-view>标签渲染对应的路由组件，读者可以将其理解为占位符。在main.js中挂载路由在main.js文件中，需要使用import语句引入路由对象，并将路由对象挂载到Vue的应用程序实例上。运行应用程序在浏览器中运行应用程序的步骤如下。在终端中输入npmrunserve命令运行项目，再打开在浏览器，在地址栏中输入http://localhost:8080/，即可在浏览器中查看项目效果。单击导航栏中的链接便可切换显示唐诗和宋词的介绍页面。poem_tab项目的运行效果（1）如下图所示。poem_tab项目的运行效果（2）如下图所示。知识点4-嵌套路由嵌套路由也称为多级路由，指的是在一个父级路由下，存在多个子级路由，嵌套路由能够更好地组织和管理应用程序中的路由关系。特定的嵌套组件结构如下图所示。在Vue.js中，可以使用VueRouter来实现嵌套路由的功能。具体使用方法如下。在router/index.js文件的routes对象中配置父级路由和子级路由在父组件中定义子组件的渲染位置在子组件中定义自身的模板内容知识点5-重定向与命名路由重定向重定向（Redirect）指的是当用户访问某个路由地址时，该路由地址被替换为另一个路由地址，系统会自动根据新地址匹配并切换至对应组件。在Vue3中，可以使用重定向来实现以下功能。当更改了一个页面的路径时，可以使用重定向来确保旧的路径仍然可以访问到新的页面。若想要将某一个页面设置为默认页面时，可以使用重定向实现。命名路由命名路由（NamedRoutes）是使用name属性为每个路由定义一个唯一的名称，以便在代码中引用这个名称，而无需硬编码（HardCoding）路由路径，命名路由具有简化路由跳转的作用。在Vue3中，可以使用命名路由来实现以下功能。当需要在代码中引用一个特定的路由时，可以使用命名路由。这样可以避免在代码中硬编码路由路径。当需要在一个组件中跳转到另一个组件时，可以使用命名路由。例如，在一个列表组件中，当用户单击某个列表项时，可以使用命名路由来跳转到详情页组件。对比使用命名路由和path路径这2种路由跳转方式，从而看出使用命名路由能够避免硬编码路由路径，示例代码如下。使用命名路由（name）：<router-link:to="{name:'libai'}">李白所作的唐诗</router-link>使用path路径：<router-linkto="/tangpoems/libai">李白所作的唐诗</router-link>需要注意的是，to属性的值是一个表达式，因此需要使用v-bind指令进行绑定。知识巩固与作业（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）老师布置相关作业进行练习。第三、四课时（路由传参、编程式导航、实验：重构农产品后台管理系统页面、导航守卫、路由组合式API、实训：蔬菜商品信息页面）回顾内容回顾上节内容，引出本节内容回顾上节的内容，并提问学生上节练习中的问题，学生回答完后，由上节内容引出本节要讲的路由传参、编程式导航、实验：重构农产品后台管理系统页面、导航守卫、路由组合式API、实训：蔬菜商品信息页面等内容。明确学习目标掌握路由传参与编程式路由的用法掌握重构农产品后台管理系统页面的实现方式掌握3种导航守卫与路由组合式API的用法掌握蔬菜商品信息页面的实现方式知识讲解知识点1-路由传参对路由传参中的query参数和params参数进行介绍。query参数query参数是通过在URL后添加参数来传递数据，例如：/user?id=123&name=Poetry。在目标页面中可以通过获取URL中的参数来获取传递的数据。在路由跳转时，可以将参数添加到URL中，示例代码如下。<router-link:to="{path:'/user',query:{id:'123',name:'Poetry'}}">User</router-link>在Vue组件中，可以通过$route.query来获取query携带的参数，示例代码如下。<template><div>{{$route.query.id}}</div>//输出123<div>{{$}}</div>//输出Poetry</template>params参数params参数是将参数直接添加到路由路径中，例如：/user/123/Poetry。在定义路由信息时，需要以占位符（:参数名）的方式将需要接收的参数名放置到路由地址中，这种参数传递方式更加直观且安全，但需要在配置路由映射关系时进行参数声明。在路由跳转时，可以将参数添加到路由路径中，示例代码如下。<router-link:to="{//注意，使用params传递参数时，需要采用命名路由的方式进行路由跳转name:'user',params:{id:'123',name:'Poetry'}}">User</router-link>在配置路由映射关系时，需要在路由路径中声明参数，并设置props属性为true，示例代码如下。{path:'/user/:id/:name',//使用占位符声明接收params参数name:user,component:User,//props的布尔值为真，允许将接收到的params参数以props的形式传给组件props:true}在Vue组件中，获取params传递的参数，以及将需要传递的参数作为一个数据项传入props选项，示例代码如下。<template><div>{{id}}</div>//输出123<div>{{name}}</div>//输出Poetry</template><script>exportdefault{//将需要传递的参数作为一个数据项传入props选项props:['id','name'],</script>知识点2-编程式导航声明式导航和编程式导航的对比在Vue中，声明式导航和编程式导航均可用于页面跳转，但二者之间存在差别。声明式导航声明式导航指的是使用<router-link>标签来进行页面跳转。示例代码如下。<router-linkto="/home">首页</router-link>编程式导航编程式导航指的是使用router对象的跳转方法来进行页面跳转。示例代码如下。router.push('/home')编程式导航的方法在Vue中，编程式导航提供了router.push()、router.replace()、router.go()这3种方法来进行路由跳转。router.push()方法router.push()方法用于跳转到指定的路由地址，可以在该方法中传入一个字符串路径或者一个描述地址的对象。router.push()方法的参数可以是一个字符串路径，也可以是一个描述地址的对象，代码如下。//字符串router.push('home')//对象router.push({path:'home'})//命名的路由router.push({name:'user',params:{userId:'123'}})//带查询参数，结果是/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})router.replace()方法router.replace()方法用于替换当前路由，可以在该方法中传入一个字符串路径或者一个描述地址的对象。router.replace()方法与router.push()方法之间也可以相互转换，即在router.push()方法中增加一个属性replace:true，代码如下所示。router.push({path:'/home',replace:true})//相当于router.replace({path:'/home'})router.go()方法router.go()方法用于跳转到地址栈中指定的路径记录，可以向该方法传入一个整数n，表示需要前进或后退的步数。代码如下所示。//向前移动一条记录router.go(1)//返回（后退）一条记录router.go(-1)//前进3条记录router.go(3)//如果没有那么多记录，静默失败router.go(-100)router.go(100)知识点3-实验：重构农产品后台管理系统页面重构农产品后台管理系统的商品管理页面结构简图如下图示。重构农产品后台管理系统的商品管理页面的代码实现创建一个名为“product”的Vue项目。确定各个组件间的路由嵌套关系。在项目router文件夹下的index.js文件中配置路由信息。在main.js文件中，引入路由并将路由挂载到Vue实例上。本实验重点分析商品管理页，具体代码可参考教学PPT或教材。知识点4-导航守卫对导航守卫中的全局守卫、路由独享守卫和组件内守卫进行介绍。全局守卫全局守卫又可分为全局前置守卫（router.beforeEach）、全局后置守卫（router.afterEach）和全局解析守卫（router.beforeResolve）。全局前置守卫全局前置守卫会在每个路由跳转前执行，可以用于在进入指定路由组件前进行逻辑验证，例如验证用户是否已登录，或者检查用户是否有权限访问该路由。使用router.beforeEach()方法注册一个全局前置守卫，代码如下。constrouter=createRouter({...})router.beforeEach((to,from,next)=>{//...})router.beforeEach()方法接收以下3个参数。to：是一个Route对象，表示即将要进入的目标路由。from：是一个Route对象，表示当前导航正要离开的路由。next：为可选参数，是一个函数对象，必须调用该方法来完成这个钩子，执行效果依赖next方法的调用参数。全局后置守卫全局后置守卫会在每个路由跳转动作完成后执行，可以用来进行一些全局后置逻辑处理，例如记录用户的访问日志或者发送统计数据。全局后置守卫通过调用router的afterEach()方法来实现。使用router.afterEach()方法注册一个全局后置守卫，代码如下。constrouter=createRouter({...})router.afterEach((to,from)=>{//...})以配置/product/all所有商品页的路由映射关系为例，代码如下。{path:'all',name:'all',component:AllProducts,meta:{title:'所有商品'}}全局解析守卫全局解析守卫会在路由跳转完成前执行，类似于beforeEach守卫，但是它会在异步组件加载完成后才执行。全局解析守卫可以用来进行一些需要等待异步组件加载完成后才能执行的逻辑处理。全局解析守卫通过调用router的beforeResolve()方法来实现。使用router.beforeResolve()方法注册一个全局解析守卫，代码如下。constrouter=createRouter({...})router.beforeResolve((to,from,next)=>{//...})路由独享守卫路由独享守卫指的是只针对某个具体路由生效的守卫，可以用来进行一些针对该路由的特定的逻辑处理。路由独享守卫只会在进入此路由时执行，可以在配置该路由的映射关系中直接使用beforeEnter()方法定义，示例代码如下。{path:'/users/:id',component:UserDetails,beforeEnter:(to,from)=>{//rejectthenavigationreturnfalse},}组件内守卫组件内守卫指的是在路由组件内执行的钩子函数，类似于路由组件内的生命周期，主要有以下3个方法。beforeRouteEnter：进入该路由组件前执行，只能访问到组件实例的上下文对象，无法访问到组件实例本身。beforeRouteUpdate：该路由的动态组件参数值发生改变时执行，可以访问到组件实例和上一个路由的信息。beforeRouteLeave：离开该路由组件时执行，可以访问到组件实例和下一个路由的信息。导航解析流程完整的导航解析流程如下。导航被触发。在失活的组件里调用beforeRouteLeave守卫。调用全局的beforeEach守卫。在重用的组件里调用beforeRouteUpdate守卫。在路由配置里调用beforeEnter。解析异步路由组件。在被激活的组件里调用beforeRouteEnter。调用全局的beforeResolve守卫。导航被确认。调用全局的afterEach钩子。触发DOM更新。调用beforeRouteEnter守卫中传给next()函数的回调函数，创建好的组件实例会作为回调函数的参数传入。知识点5-路由组合式APIVue中的路由组合式API主要包括以下2个函数。useRoute()函数：用来获取当前路由信息的函数。useRouter()函数：用来获取路由实例的函数。在setup()函数中访