ciya68

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

发布时间: 2022.06.16
阅读量: 62
分享:

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。

image.png

        当用户使用 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 这一组件来实现我们的前端路由。



分享到微信朋友圈 ×

Copyright © 2016 广州思洋文化传播有限公司,保留所有权利。 粤ICP备09033321号 Copyright © 2016 ciya. Inc. All rights reserved