SPA路由机制详解(看不懂不要钱~~)



前言

总所周知,随着前端应用的业务功能起来越复杂,用户对于使用体验的要求越来越高,单面(SPA)成为前端应用的主流形式。而大型单页应用最显著特点之一就是采用的前端路由跳转子页面系统,通过改变页面的URL,在不重新请求页面的情况下,更新页面视图。

更新视图但是浏览器不重新渲染整个页面,只是重新渲染部分子页面,加载速度快,页面反应灵活,这是 SPA 的优势,这也是前端路由原理的核心,这会给人一种仿佛在操作 APP 一样的感觉,目前在浏览器环境中实现这一功能的方式主要有两种:

  • 利用 URLhash(#)
  • 利用 H5 新增方法 History interface

利用URLHash(#)

H5 还没有流行开来时,一般 SPA 都采用 urlhash(#) 作为锚点,获取到 # 之后的值,并监听其改变,再进行渲染对应的子页面。网易云音乐官网就是利用的此技术。

例如,你的地址为http://localhost:8888/#/abc 那么利用 location.hash 输出的内容就为 #/abc

那么我就先从 location 这个对象说起。

先来看看location的官方属性有哪些

属性 描述
hash 设置或返回从 # 开始的 URL (锚)
host 设置或返回主机名和当前 URL 的端口号
hostname 设置或返回当前 URL 的主机名
href 设置或返回完整的 URL
pathname 设置或返回当前 URL 的路径部分
port 设置或返回当前 URL 的端口号
protocol 设置或返回当前 URL 的协议
search 设置或返回从 ? 开始的 URL 部分

由上表格可以知道,我们可以轻易的获取到 # 之后的部分,那么拿到这个部分我们怎么监听其变化以及对应的子页面进行改变呢?

window 对象中有一个事件是专门监听hash的变化,那就是onhashchange,首先我们需要监听此事件:


  

id1 id2 id3

可见此时我们已经完全监听到了 URL 的变化,页面上的内容也对应改变了。
那么,该如何载入不同的页面呢,目前来说有三种方式:

  • 寻找节点内容并改变(也就是上面我们演示的内容)
  • import 一个 JS 文件,文件内部 export 模版字符串
  • 利用 AJAX 加载对应的 HTML 模版

第一种方式已经演示过,不过这种方式局限性太大,下面我会演示另外两种方式加载页面。

import 方式

定义一个 JS 文件,名为 demo1.js,在里面输入内容:

const str = `
  
我是import进来的JS文件
` export default str

在主文件里 import 进来,并进行测试(使用 Chrome 一定要使用服务器开启,或者直接用火狐打开):


  

id1 id2 id3

SPA路由机制详解(看不懂不要钱~~)_第1张图片

可见导入文件已经生效,目前大部分框架编译过后是采用类似此种方式处理。

例如,vue 框架,.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块