什么是单页面应用及实现前端路由的基本原理

1、什么是单页面应用

对于网站建设公司来说，根据不同的 url 地址，显示不同的内容，但是显示在同一个页面中，也就是只有一个页面，所以称为单页面应用，英文 SPA(SinglePage Application)。像移动端很多 App 都是单页面应用。

改变 url 地址，显示不同的页面，实现的手段就是前端路由。

2、什么是路由及前端路由

简单举例说明，假如我们有一台提供 Web 服务的服务器的网络地址是：122.22.33.11，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：

http:// 122.22.33.11/

http:// 122.22.33.11/about

http:// 122.22.33.11/news

那么其路径就分别是 /，/about，/news。

当用户使用 http:// 122.22.33.11/about 来访问该页面时， Web 服务会接收到这个请求，然后会解析 URL 中的路径 /about， 在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次【路由分发】，这个分发就是通过【路由】来完成的。

简单的说，路由是根据不同的 url 地址展示不同的内容或页面。以前路由都是后台做的，通过用户请求的 url 导航到具体的 html页面，前端路由就是通过配置 js 文件，改变 url 地址，显示不同的页面，把这个工作拿到前端来做。即 URL 变化引起 UI 更新，而且页面不能刷新。

3、实现前端路由基本原理

要实现前端路由，需要解决两个核心问题：

如何改变 URL 却不引起页面刷新？

如何检测 URL 变化了？

目前的前端路由的实现方式主要有下面两种

（1）hash 路由：location.hash+hashchange 事件

（2）history 路由：history.pushState()+popState 事件

其实不管是哪种模式都是基于浏览器自身的特性。

（1）location.hash+hashchange 事件：实现基本原理

这种方法的好处在于支持 IE 浏览器。对早期的一些浏览器的支持比较好。hash 是什么：其实在之前的前端开发中，是有所接触的。

例如，在某些情况下，我们需要定位页面上的某些位置，就像下面的例子中展现的那样，我想要通过点击不同的链接按钮就跳转到指定的位置，这里我们使用的锚点定位其实就是 hash。

<div id=“content”>

<div class=“btn-container”>

<a class=“btn” href=“#image1”>图片 1

<a class=“btn” href=“#image2”>图片 2

</div>

<img src=“./xxx/xxx.jpg” id=“image1”>

<img src=“./xxx/xxx.jpg” id=“image2”>

</div>

location.hash 始终指向页面 url 中#之后的内容，比如：当当

前页面的 url =‘www.taobao.com’,可以在浏览器的控制台输入location.hash 为 空 （ 因 为 没 有 # ）， 当 页 面 指 向 url =‘www.taobao.com/#/about’的时候，location.hash = ‘#/about’。通过读取 location.hash 可以知道当前页面所处的位置。通过hashchange 事件可以监听 location.hash 的变化，从而进行相应的处理即可。

那么如何触发 hash 的改变呢？这里主要由两种方法：

第一、设置 a 标签，href = ‘#/about’，当点击标签的时候，可以在当前 url 的后面增加上’#/about’，同时触发 hashchange,在回调函数中进行处理。

第二、直接在 js 中设置 location.hash = '#/about’即可，此时

url 会改变，也会触发 hashchange 事件。

说明：改变 URL 中的 hash 部分（#后面内容）不会引起页面刷新 。

（2）history.pushState()+popState 事件：实现基本原理

history 路 由 ： 在 之 前 的 html 版 本 中 ， 我 们 可 以 通 过history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。而该实现方式是通过 pushState()修改 url 的地址，popstate 事件监听地址的改变。pushState()方法和 replaceState 事件是 html5 新增的，它们的配合使用不会引起页 面 刷 新 。

具 体 实 现 原 理 参 考 ：https://www.renfei.org/blog/html5-introduction-3-history-api. html

在 Vue 中，Vue Router 是官方提供的路由管理器。它和

Vue.js 深度集成，因此，不管是采用 hash 的方式还是使用 history实现我们的前端路由都有很好的支持，所以下面我们采用 VueRouter 这一组件来实现我们的前端路由。