《Vue.js前端开发技术与实践（第二版）》 课件 第9章Vue Router路由.pptx

第5章Vue路由

掌握了解掌握掌握学习目标了解vue-router的实现原理12熟练路由的安装与使用3掌握路由对象的常用属性和动态路由的匹配及路由嵌套的方法4掌握命名路由、命名视图和编程式导航及query、params传参方式的方法

知识架构9.1初识路由1什么是后端路由2什么是前端路由

知识架构9.2vue-router1vue-router工作原理2vue-router基本使用3路由对象属性

知识架构9.4动态路由1什么是动态路由2query方式传参3params方式传参

知识架构9.5嵌套路由1什么是嵌套路由2嵌套路由案例

知识架构9.6命名路由1什么是命名路由2命名路由案例

知识架构9.7命名视图1什么是命名视图2命名视图案例

知识架构9.8编程式导航1router.push()2router.replace()3router.go()

9.1初识路由1后端路由提到路由，一般会想到生活中常见的路由器，路由器主要用于连接多个逻辑上分开的网络，逻辑网络代表一个单独的网络或者一个子网，可以通过路由器功能来完成不同网络之间数据的传递。在Vue中也引入了路由的概念，因此，我们先来对程序开发中的路由进行简单地了解。

9.1初识路由1后端路由程序开发中的路由分为后端路由和前端路由。后端路由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转到不同的URL，都会重新访问服务器。服务器收到请求后，将数据和模板组合，返回HTML页面，或者直接返回HTML模板，由前端JavaScript程序再去请求数据，使用前端模板和数据进行组合，生成最终的HTML页面。

9.1初识路由1后端路由后端路由的工作原理如下图所示。后端路由

9.1初识路由1后端路由上图中，网站的服务器地址是http://localhost，在这个网站中提供了3个页面，分别为“首页”“关于”和“我的资料”。当用户在浏览器中输入URL地址http://localhost/person来访问“我的资料”页面时，服务器就会收到这个请求，找到相对应的处理程序，这就是路由的分发，这一功能是通过路由来实现的。

9.1初识路由1后端路由提示浏览器每访问一次新页面的时候，都要向服务器发送请求，然后服务器会响应请求，返回新页面给浏览器，在这个过程中会有一定的网络延迟。

9.1初识路由2前端路由前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。对于单页面应用（SPA）来说，主要通过URL中的hash（#号）来实现不同页面之间的切换。hash有一个特点，就是HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash来实现。

9.1初识路由2前端路由前端路由的工作原理如下图所示。前端路由

9.1初识路由2前端路由上图中，index.html后面的“#/home”是hash方式的路由，由前端路由来处理，将hash值与页面中的组件对应，当hash值为“#/home”时，就显示“首页”组件。

9.1初识路由2前端路由提示前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验。

9.2vue-router1vue-router工作原理单页面应用（SPA）的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的vue-router。在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。

9.2vue-router1vue-router工作原理hash模式vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当U