Vue.js 3从入门到实战（微课视频版） 思政课件 陈恒 清华 第10章 Vue Router

Vue.js3从入门到实战（微课视频版）第10章VueRouter学习目的与要求本章主要讲解了VueRouter的基本用法。通过本章的学习，掌握如何使用VueCLI脚手架搭建Vue.js项目，掌握VueRouter的基本用法、高级应用以及路由钩子函数的使用。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录10.1什么是路由10.2VueRouter的安装10.3VueRouter的基本用法10.4VueRouter高级应用10.5路由钩子函数10.6路由元信息10.7登录权限验证示例《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.1什么是路由路由，本是一个网络工程术语，是指分组从源到目的地时，决定端到端路径的网络范围的进程。在Web前端单页面应用中，路由描述的是URL与UI之间的映射关系，这种映射是单向的，即URL变化引起UI更新（无需刷新页面）。VueRouter是Vue.js

官方的路由管理器，它和Vue.js的核心深度集成，使构建单页面应用变得更加容易。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录10.1什么是路由10.2VueRouter的安装10.3VueRouter的基本用法10.4VueRouter高级应用10.5路由钩子函数10.6路由元信息10.7登录权限验证示例《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.2.1本地独立版本方法可通过地址“/vue-router@next”将最新版本的VueRouter库（vue-router.global.js）下载到本地（在页面上右击，在弹出的快捷菜单中选择另存为），编写本书时，最新版本是4.0.13。然后，在界面文件中引入vue-router.global.js库，示例代码如下。<scriptsrc="js/vue-router.global.js"></script>《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.2.2CDN方法在界面文件中可通过CDN（ContentDeliveryNetwork，内容分发网络）引入最新版本的VueRouter库，示例代码如下。<scriptsrc="/vue-router@next"></script>对于生产环境，建议使用固定版本，以免因版本不同带来兼容性问题，示例代码如下。<scriptsrc="/vue-router@4.0.13/dist/vue-router.global.js"></script>《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.2.3NPM方法在使用Vue.js构建大型应用时推荐使用NPM安装最新稳定版的VueRouter，因为NPM能很好地和webpack模块打包器配合使用，示例如下。npminstallvue-router@next《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.2.4命令行工具（VueCLI）方法为提高单页面应用程序的开发效率，我们现在开始使用VueCLI（Vue脚手架）搭建Vue.js项目。VueCLI是一个基于Vue.js进行快速开发的完整系统，提供如下功能。

通过@vue/cli实现交互式项目脚手架； 通过@vue/cli+@vue/cli-service-global实现零配置原型开发； 一个运行时依赖@vue/cli-service，该依赖可升级，基于webpack构建，并带有合理的默认配置；可通过项目的配置文件进行配置；可通过插件进行扩展； 一个丰富的官方插件集合，集成了前端生态工具； 提供一套创建和管理Vue.js项目的用户界面。VueCLI致力于将Vue.js生态工具基础标准化。确保各种构建工具平稳衔接，让开发者专注在撰写应用上，而不必纠结配置的问题。《Vue.js3从入门到实战》陈恒主编，清华大学出版社1．全局安装VueCLI打开cmd命令行窗口，输入命令npminstall-g@vue/cli全局安装Vue脚手架，输入命令vue--version查看版本（测试是否安装成功）。如果需要升级全局的VueCLI，在cmd命令行窗口运行npmupdate-g@vue/cli命令即可。《Vue.js3从入门到实战》陈恒主编，清华大学出版社2．打开图形化界面安装成功后，在命令行窗口，继续输入命令vueui打开一个浏览器窗口，并以图形化界面引导至项目创建的流程。《Vue.js3从入门到实战》陈恒主编，清华大学出版社3．创建项目--创建项目界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社3．创建项目--项目详情界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社3．创建项目--项目功能界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社3．创建项目--项目配置界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社4．使用VSCode打开项目使用VSCode打开（File—>OpenFolder，选择项目目录）第3步创建的项目router-demo。打开后，在Terminal终端输入npmrunserve命令启动服务。《Vue.js3从入门到实战》陈恒主编，清华大学出版社5．运行项目在浏览器地址栏中，访问http://localhost:8080/即可运行项目router-demo。通过http://localhost:8080/访问时，打开的页面是public目录下的index.html。index.html是一个普通的html文件，让它与众不同的是“<divid="app"></div>”这句程序，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其他的内容都将在这个div中展示。另外，整个项目只有这一个html文件，所以这是一个单页面应用，当我们打开这个应用，表面上可以看到很多页面，实际上它们都在这一个div中显示。在main.js中，创建了一个Vue对象。该Vue对象的挂载目标是“#app”（与index.html中的id="app"对应）；router代表该对象包含VueRouter，并使用项目中定义的路由（在src/router目录下的index.js文件里定义）。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录10.1什么是路由10.2VueRouter的安装10.3VueRouter的基本用法10.4VueRouter高级应用10.5路由钩子函数10.6路由元信息10.7登录权限验证示例《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.3VueRouter的基本用法使用VueRouter动态加载不同组件时，需要将组件（Components）映射到路由（Routers），然后告诉VueRouter在哪里显示它们。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.3.1跳转与传参VueRouter有两种跳转，第一种是使用内置的<router-link>组件，默认渲染一个<a>标签，示例代码如下。<divid="nav">

<router-linkto="/">第一个页面</router-link>|

<router-linkto="/MView2">第二个页面</router-link></div><router-link>组件与一般组件一样，to是一个prop，指定跳转的路径。使用<router-link>组件，在HTML5的History模式下将拦截点击，避免浏览器重新加载页面。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.3.1跳转与传参VueRouter的第二种跳转方式需要在JavaScript里进行，类似于window.location.href。这种方式需要使用router实例方法push或replace。<template><div>第一个页面</div><button@click="goto">去第二个页面</button></template><script>exportdefault{methods:{

goto(){//也可以使用replace方法，与replace属性一样不会向history添加新记录

this.$router.push('/MView2')}}}《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.3.1跳转与传参路由传参，一般有两种方式：query和params。不管哪种方式都可以是通过修改URL来实现。（1）query传参query传递参数的示例代码如下：<router-linkto="/?id=888&pwd=999">通过$route.query获取路由中的参数，示例代码如下：<h4>id：{{$route.query.id}}</h4><h4>pwd：{{$route.query.pwd}}</h4>《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.3.1跳转与传参（2）params传参在路由规则中定义参数，修改路由规则的path属性（动态匹配），示例代码如下。{path:'/:id/:pwd',name:'MView1',component:MView1}<router-linkto="/888/999">通过$route.params获取路由中的参数，示例代码如下：<h4>id：{{$route.params.id}}</h4><h4>pwd：{{$route.params.pwd}}</h4>《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.3.2配置路由路由配置，通常在前端工程项目的src/router/index.js文件中进行。首先，需要在前端工程项目的src/main.js和src/router/index.js文件中，分别导入vue和vue-router模块，并在main.js中执行use方法注册路由。《Vue.js3从入门到实战》陈恒主编，清华大学出版社【例10-1】VueRouter实战——三个组件间的跳转与传参。本实例在10.2.4节VueRouter项目router-demo的基础上进行。通过本案例讲解路由的跳转、传参以及配置过程。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录10.1什么是路由10.2VueRouter的安装10.3VueRouter的基本用法10.4VueRouter高级应用10.5路由钩子函数10.6路由元信息10.7登录权限验证示例《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.4.1动态路由匹配需要将符合某种匹配模式的所有路由映射到同一个组件时，可以在路由路径中使用动态路径参数（如path:'/user/:uname/:pwd'）实现。示例代码如下。//定义路由constroutes=[{path:'/user/:uname/:pwd',name:'user',component:UserView}]在上述示例代码中定义路由后，/user/zhangsan/123456、/user/lisi/654321等用户都将映射到相同的路由。《Vue.js3从入门到实战》陈恒主编，清华大学出版社每一个动态路径参数使用冒号（:）标记，冒号后面是参数名。当匹配到一个路由时，参数值将被设置到$route.params中，并可以在路由对应的组件内使用“$route.params.参数名”获得参数值。10.4.1动态路由匹配如果有多个参数，即多个冒号，则$route.params中保存为对象。例如，路由路径path为/user/:uname/:pwd，则对应的访问路径为/user/zhangsan/123456，$route.params中的对象为{uname:'zhangsan',pwd:'123456'}。另外，也可以使用post进行多个动态参数传递，例如，路由路径path为/user/:uname/post/:pwd/post/:age，则对应的访问路径为/user/:lisi/post/:654321/post/:18，$route.params中的对象为{uname:'lisi',pwd:'123456',age:'18'}。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.4.1动态路由匹配$route路由信息对象表示当前激活的路由状态信息，每次成功导航后都将产生一个新的对象。除了$route.params外，$route对象还提供其他许多有用的信息。《Vue.js3从入门到实战》陈恒主编，清华大学出版社序号属性名称说

明1$route.path对应当前路由的路径，如/third/:张三/post/:654321/post/:182$route.params一个key:value对象，包含了所有动态参数，如果没有参数，则是一个空对象，如{"uname":":张三","pwd":":654321","age":":18"}3$route.query一个key:value对象，表示URL查询参数。例如，/first?uname=chenheng&pwd=123456，则有$route.query.uname为chenheng。如果没有查询参数，则是空对象4$route.hash当前路由的哈希值（不带#），如果没有哈希值，则为空字符串5$route.fullPath完成解析后的URL，包含查询参数和哈希的完整路径6$route.matched返回数组，包含当前匹配的路径中包含的所有片段所对应的配置7$当前路径名称8$route.meta路由元信息【例10-2】VueRouter实战——$route对象的属性。本实例在【例10-1】的基础上进行。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.4.2嵌套路由嵌套路由，即路由的多层嵌套，也称为子路由。在实际应用中，嵌套路由相当于多级菜单，一级菜单下有二级菜单，二级菜单下有三级菜单，等等。首先，在根组件App.vue中定义基础路由（相当于一级菜单）导航；其次，定义基础路由对应的组件；最后，完成所有嵌套路由组件的定义，并在router/index.js文件中定义嵌套路由。《Vue.js3从入门到实战》陈恒主编，清华大学出版社【例10-3】VueRouter实战——嵌套路由的实现过程。本实例在参考10.2.4节创建VueRouter项目nested-routes的基础上进行。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.4.3编程式导航除了使用内置的<router-link>组件，渲染一个<a>标签定义导航链接外，还可以通过编程调用路由（router或this.$router）的实例方法实现导航链接。《Vue.js3从入门到实战》陈恒主编，清华大学出版社序

号方法名称功能说明1push()跳转到由参数指定的新路由地址，在历史记录中添加一条新记录2replace()跳转到由参数指定的新路由地址，替换当前的历史记录3go(n)n为整数，在历史记录中向前或后退n步4forward()在历史记录中向前一步，相当于this.$router.go(1)5back()在历史记录中后退一步，相当于this.$router.go(-1)10.4.3编程式导航push()方法和replace()方法的用法相似，唯一不同的是push()方法在历史记录中添加一条新记录，replace()方法不会添加新记录，而是替换当前记录。push()方法和replace()方法的参数可以是字符串、对象、命名路由、带查询参数等多种形式，示例如下。//字符串路由paththis.$router.push('/')//对象this.$router.push({path:'/product'})//命名路由及params传参，params更像post，是隐性传参this.$router.push({name:'home',params:{uname:'123',pwd:'abc'}})//带查询参数，/product?uname=123&pwd=abc，更像get传参，是显性传参this.$router.push({path:'/product',query:{uname:'123',pwd:'abc'}})this.$router.push({name:'home',state:{uname:'123',pwd:'abc'}})在home对应的页面可以使用history.state接收数据。《Vue.js3从入门到实战》陈恒主编，清华大学出版社【例10-4】VueRouter实战——编程式导航的应用。本实例在【例10-3】的基础上修改根组件App.vue即可（本实例项目名称为programming-navigation），其他程序与【例10-3】相同。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.4.4命名路由{path:'/',

name:'home',component:HomeView}<router-link:to="{name:'home',params:{uname:'123',pwd:'abc'}}">首页</router-link>与编程式导航this.$router.push({name:'home',params:{uname:'123',pwd:'abc'}})功能相同。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.4.5重定向{path:'/first',redirect:'/second',name:'first',component:FirstView}《Vue.js3从入门到实战》陈恒主编，清华大学出版社{path:'/first',

redirect:{name:'second'},name:'first',component:FirstView}10.4.6路由组件props传参在组件中使用$route将使路由与组件形成高度耦合，从而使组件只能在某些特定的URL上使用，限制了组件的灵活性。配置路由时，使用props传参，可降低路由与组件的耦合度。<router-linkto="/">首页</router-link>{path:'/',name:'home',component:HomeView,

props:{uname:'张三',upwd:'123456'}}《Vue.js3从入门到实战》陈恒主编，清华大学出版社<template><divclass="home"><h1>{{uname}}</h1><h1>{{upwd}}</h1></div></template><script>exportdefault{name:'HomeView',

props:{uname:{type:String,default:'lisi'},upwd:{type:String,default:'000000'}}}</script>10.4.7HTML5历史记录模式《Vue.js3从入门到实战》陈恒主编，清华大学出版社import{createRouter,createWebHashHistory}from'vue-router'constrouter=createRouter({history:createWebHashHistory(),routes:[//...],})import{createRouter,createWebHistory}from'vue-router'constrouter=createRouter({history:createWebHistory(),routes:[//...],})目录10.1什么是路由10.2VueRouter的安装10.3VueRouter的基本用法10.4VueRouter高级应用10.5路由钩子函数10.6路由元信息10.7登录权限验证示例《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.5.1全局前置钩子函数在VueRouter中，使用router.beforeEach注册一个全局前置钩子函数（在路由跳转前执行），注册示例代码如下。constrouter=newcreateRouter({...})router.beforeEach((to,from)=>{//...//返回false以取消导航returnfalse})《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.5.1全局前置钩子函数router.beforeEach(async(to,from)=>{ //在ES7标准中新增了async和await关键字，作为处理异步请求的一种解决方案if(//检查用户是否已登录

!isAuthenticated&&//避免无限重定向

!=='Login'){//将用户重定向到登录页面

return{name:'Login'}}})《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.5.2全局解析钩子函数在VueRouter中，使用router.beforeResolve注册一个全局解析钩子函数。与router.beforeEach

类似，在每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内钩子函数和异步路由组件被解析之后，解析钩子函数就被正确调用。《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.5.2全局解析钩子函数《Vue.js3从入门到实战》陈恒主编，清华大学出版社router.beforeResolve(asyncto=>{if(to.meta.requiresCamera){try{awaitaskForCameraPermission()}catch(error){if(errorinstanceofNotAllowedError){//...处理错误，然后取消导航returnfalse}else{//意料之外的错误，取消导航并把错误传给全局处理器throwerror}}}})10.5.3全局后置钩子函数在VueRouter中，也可以使用router.afterEach注册全局后置钩子函数，该钩子函数不接收next参数，也不会改变导航本身，在跳转之后判断。对于分析、更改页面标题、声明页面等辅助功能都很有用。示例代码如下。router.afterEach((to,from)=>{ //...})《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.5.4某个路由的钩子函数constroutes=[{path:'/users/:id',component:UserDetails,

beforeEnter:(to,from)=>{//取消导航

returnfalse},},]《Vue.js3从入门到实战》陈恒主编，清华大学出版社路由的beforeEnter钩子函数，只在进入路由时触发，不会在params、query

或

hash

改变时触发。例如，从

/users/2进入到

/users/3或者从

/users/2#info进入到

/users/2#projects。它们只有在从一个不同的路由导航时，才会被触发。10.5.5组件内的钩子函数constUserDetails={template:`...`,

beforeRouteEnter(to,from){//在渲染该组件的对应路由被验证前调用，不能获取组件实例`this`！因为当该钩子函数执行时，组件实例还没被创建！

},

beforeRouteUpdate(to,from){//在当前路由改变，但是该组件被复用时调用。举例来说，对于一个带有动态参数的路径`/users/:id`，在`/users/1`和`/users/2`之间跳转的时候，由于渲染同样的`UserDetails`组件，因此组件实例会被复用，此钩子函数在此情况下也被调用。因为在这种情况发生的时候，组件已经挂载好了，该钩子函数可以访问组件实例`this`},

beforeRouteLeave(to,from){//在导航离开渲染该组件的对应路由时调用与`beforeRouteUpdate`一样，它可以访问组件实例`this`},}《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录10.1什么是路由10.2VueRouter的安装10.3VueRouter的基本用法10.4VueRouter高级应用10.5路由钩子函数10.6路由元信息10.7登录权限验证示例《Vue.js3从入门到实战》陈恒主编，清华大学出版社10.6路由元信息有时，可能希望将任意信息