vue2路由

路由

路由(英文：route)就是对应关系， 路由分为前端路由和后端路由，比如前端路由就是，Hash 地址与组件之间的对应关系。

具体来说：一个路由就是一组key-value的对应关系

• key 为 url 路径

• value 可能是函数function 或 组件component

多个路由，需要经过路由器(英文：router)管理

后端路由

后端路由概念

理解：value 是 函数function, 用于处理客户端提交的请求。

工作过程：服务器接收到一个请求时，根据用户请求路径URL找到对应的处理函数 来处理请求，返回响应数据。

路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样

http://hometown.xxx.edu.cn/bbs/forum.html

有时还会有带.asp或.php的路径，这就是所谓的SSR(Server Side Render) 服务端渲染，通过服务端渲染，直接返回页面。

其响应过程是这样的

• 浏览器发出请求

• 服务器监听到80端口（或443）有请求过来，并解析url路径

• 根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）

• 浏览器根据数据包的Content-Type来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

Node.js 中的路由

在nodejs中路由是指应用程序如何响应客户端对特定端点的请求，该端点是 URL（或路径）和特定的 HTTP 请求方法（GET、POST 等）。

每个路由可以有一个或多个处理函数，当路由匹配时执行。

路由定义采用以下结构：app.method(path, handler)

• app：express的实例

• MTHOD：http请求方法的小写，比如：app.get()、app.post()

• path：请求的url地址

• handler：当路由被匹配的时候执行的函数，该函数有两个参数request和response，分别表示请求对象和响应对象

app.get('/index', function (req, res) {
    res.render('index.html', {});
});

前端路由

前端路由概念

理解：value 是 组件component，用于展示页面内容。

工作过程：当浏览器的路径改变时，对应的组件就会显示。

前端路由：指的是url与组件的映射关系，据不同的 url 地址展示不同的内容或页面，通过url的变化实现页面的局部变化，而不需要刷新页面；

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

路由与普通的js显隐实现页面切换的区别：路由有url支持分享、链接、收藏；

单页SPA

HTML5之后，流行单页网站(single page web application: SPA 单页应用)，单页应用指的是一个web应用只有一个HTML页面，一个页面有不同的部分，点击页面导航部分不会刷新页面，也不会跳转页面，而是根据url地址的不同，显示不同的部分。

单页应用中不同部分的展示，需要通过组件的展示与切换来实现，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。

单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。

什么时候使用前端路由

在单页面应用，大部分页面结构不变，只改变部分内容的使用

前端路由有什么优点和缺点

• 优点

用户体验好，不需要每次都从服务器全部获取，快速展现给用户

• 缺点

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存

单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

前端路由实现原理

前端路由的工作方式：

• 用户点击了页面上的路由链接

• 导致了 URL 地址栏中的【 Hash 值或者URL路径】发生了变化

• 前端路由监听了到【 Hash 地址或者URL路径】的变化

• 前端路由把当前【 Hash 地址或者URL路径】对应的组件渲染都浏览器中

hash 模式

前端路由的实现其实很简单。本质上就是检测 url 的变化，截获 url 地址，然后解析来匹配路由规则。

在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于

https://segmentfault.com/a/1190000011956628#articleHeader2

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。

hash 的实现相对来说要简单方便些，而且不用服务器来支持。

url地址分为6部分：协议、IP(域名)、端口号、路径、参数、hash哈希值。

http://www.example.com/login?username=tom#print

哈希值：url中第一个#后边的内容都是这个url的哈希值

url中的哈希值是给前端浏览器使用的，最初，浏览器能够使用hash实现页面锚点。

hash仅作为前端浏览器的参考，当浏览器根据一个url向服务器发送请求时，哈希值是不会发送的。

hashchange 使用来监听页面hash值的变化的事件：window.addEventListener("hashchange", fun);

假如我们要用 hash 的模式实现一个路由，那么流程应该是这样的。

HTML5 History 模式

14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 onpopstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

假如我们要用 History 的模式实现一个路由，那么流程应该是这样的。

Vue Router

前端路由是现代SPA应用必备的功能，每个现代前端框架都有对应的实现，例如vue-router、react-router。

Vue Router是Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，使用 Vue.js + Vue Router 让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表

• 模块化的、基于组件的路由配置

• 路由参数、查询、通配符

• 基于 Vue.js 过渡系统的视图过渡效果

• 细粒度的导航控制

• 带有自动激活的 CSS class 的链接

• HTML5 历史模式或 hash 模式，在 IE9 中自动降级

• 自定义的滚动条行为

官网：Vue Router

Vue2.x对应vue-router的V3.x

Vue3.x对应vue-router的V4.x

Vue中路由器router

• 路由规则route：/home - 首页组件

• 路由规则route：/about - 关于组件