vue-router源码分析(上)

简介

路由的概念相信大部分同学并不陌生，我们在用 Vue 开发过实际项目的时候都会用到 Vue-Router 这个官方插件来帮我们解决路由的问题。它的作用就是根据不同的路径映射到不同的视图。本文不再讲述路由的基础使用和API，不清楚的同学可以自行查阅官方文档vue-router3 对应 vue2 和 vue-router4 对应 vue3。今天我们从源码出发以vue-router 3.5.3源码为例，一起来分析下Vue-Router的具体实现。

由于篇幅原因，vue-router源码分析分上、中、下三篇文章讲解。

vue-router源码分析(上)

vue-router源码分析(中)

vue-router源码分析(下)

路由

既然我们在分析路由，我们首先来说说什么是路由，什么后端路由、什么是前端路由。

路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。

我们先来说说后端路由

后端路由

后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。

对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。 对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。

然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的HTML页面。早期的jsp就是这种模式。

前端路由

刚刚也介绍了，在前后端没有分离的时候，服务端都是直接将整个 HTML 返回，用户每次一个很小的操作都会引起页面的整个刷新（再加上之前的网速还很慢，所以用户体验可想而知）。

在90年代末的时候，微软首先实现了 ajax（Asynchronous JavaScript And XML） 这个技术，这样用户每次的操作就可以不用刷新整个页面了，用户体验就大大提升了。

虽然数据能异步获取不用每个点击都去请求整个网页，但是页面之间的跳转还是会加载整个网页，体验不是特别好，还有没有更好的方法呢？

至此异步交互体验的更高级版本 SPA单页应用 就出现了。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的。既然页面的跳转是无刷新的，也就是不再向后端请求返回 HTML页面。

页面跳转都不从后端获取新的HTML页面，那应该怎么做呢？所以就有了现在的前端路由。

可以理解为，前端路由就是将之前服务端根据 url 的不同返回不同的页面的任务交给前端来做。在这个过程中，js会实时检测url的变化，从而改变显示的内容。

前端路由优点是用户体验好，用户操作或页面跳转不会刷新页面，并且能快速展现给用户。缺点是首屏加载慢，因为需要js动态渲染展示内容。而且由于内容是js动态渲染的所以不利于SEO。

如何实现前端路由

想实现一个路由到底需要些什么功能呢？

路由映射表

要实现路由，需要一个很重要的东西-路由映射表。

• 服务端做路由页面跳转时，映射表的反映的是url和页面的关系
<