JavaScript单页面路由详解：打造现代化、高性能的Web应用-灵析社区

# 基于SPA的单页面路由

关于单页应用

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。简单来说就是用户只需要加载一次页面就可以不再请求，当点击其他子页面时只会有相应的URL改变而不会重新加载。

大部分用于：移动端 / PC端的后台管理系统

单页应用的实现

1.依赖hash的改变（锚点）
2.依赖历史记录(history)
3.前端路由：在页面中同一个位置，根据不同的hash值显示不同的页面结构

实现改变URL页面不刷新

按照常规的逻辑我们切换URL好像就会跳转网页，但是转念一想锚链接的URL不是也改变了吗？这里，存在两种满足需求的方式。
利用URL中的hash方式
了解http协议就会知道，url的组成部分有很多，譬如协议、主机名、资源路径、查询字段等等，其中包含一个称之为片段的部分，以“#”为标识。打开控制台，输入 location.hash，你可以得到当前url的hash部分（如果当前url不存在hash则返回空字符串）。接下来，输入 location.hash = ‘123’，会发现浏览器地址栏的url变了，末尾增加了’#123’字段，并且，页面没有被重新刷新。很显然，这很符合我们的要求。
利用H5的history API
html5引入了一个history对象，包含了一套访问浏览器历史的api，可以通过window.history访问到它。 HTML5 History API包括2个方法：history.pushState()和history.replaceState()，和1个事件：window.onpopstate。这两个方法都是对浏览器的历史栈进行操作，将传递的url和相关数据压栈，并将浏览器地址栏的url替换成传入的url且不刷新页面，而且他们的参数也相同，第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取。第二个参数是标题，目前浏览器并未实现。第三个参数则是设定的url。一般设置为相对路径，如果设置为绝对路径时需要保证同源。。不同的是pushState 将指定的url直接压入历史记录栈顶，而 replaceState 是将当前历史记录栈顶替换成传入的数据。不过低版本对history AIP的兼容性不是很好。

监听URL的变化，执行页面替换逻辑

1.对于hash方式，我们通常采用监听hashchange事件，在事件回调中处理相应的页面视图展示等逻辑。

两种实现的比较

总的来说，基于Hash的路由，兼容性更好；基于History API的路由，更加直观和正式。但是，有一点很大的区别是，基于Hash的路由不需要对服务器做改动，基于History API的路由需要对服务器做一些改造。

代码实现

<div id="box">
    <div class="top">顶部通栏</div>
    <div class="bottom">
        <div class="slide">
            <a href="#/first">first</a>
            <a href="#/second">second</a>
            <a href="#/third">third</a>
            <a href="#/fourth">fourth</a>
        </div>
        <div class="content router-view"></div>
    </div>
</div>

<style>
*{
    margin: 0;
    padding: 0;
}
html,body,#box{
    width: 100%;
    height:100%;
}
#box{
    display: flex;
    flex-direction:column;
}
#box>.top{
    height: 130px;
    background: skyblue;
}
#box>.bottom{
    flex:1;
    display: flex;
}
#box>.bottom>.slide{
    width: 230px;
    background-color: orange;
    box-sizing: border-box;
    padding: 15px;
}
#box>.bottom>.slide>a{
    font-size: 22px;
    display: block;
    margin: 10px 0;
    text-decoration: none;
    color: #333;
}
#box>.bottom>.content{
    flex: 1;
    box-sizing: border-box;
    padding: 15px;
    background: purple;
    font-size: 100px;
    color: white
}
</style>

//1. 准备不同的页面显示结构
const template1 = `
				<div>
					first
				</div>
			`;
const template2 = `
				<div>
					second
				</div>
			`;
const template3 = `
				<div>
					third
				</div>
			`;
const template4 = `
				<div>
					fourth
				</div>
			`;
 
//2. 获取路由入口对象
let routerView = document.querySelector('.router-view');
//3. 捕获浏览器地址栏 hash值的改变
window.onhashchange = function(){
    console.log('地址栏hash值改变了');
    console.log(window.location.hash);
    //获取hash
    const {hash} = window.location;
    //判断hash值，进行不同的结构渲染
    switch(hash){
        case '#/first' : routerView.innerHTML = template1;break;
        case '#/second' : routerView.innerHTML = template2;break;
        case '#/third' : routerView.innerHTML = template3;break;
        case '#/fourth' : routerView.innerHTML = template4;break;
    }
}

代码升级（组件化开发）

index.html

<div id="box">
    <div class="top">顶部通栏</div>
    <div class="bottom">
        <div class="slide">
            <a href="#/first">first</a>
            <a href="#/second">second</a>
            <a href="#/third">third</a>
            <a href="#/fourth">fourth</a>
        </div>
        <div class="content router-view"></div>
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}
html,body,#box{
    width: 100%;
    height:100%;
}
#box{
    display: flex;
    flex-direction:column;
}
#box>.top{
    height: 130px;
    background: skyblue;
}
#box>.bottom{
    flex:1;
    display: flex;
}
#box>.bottom>.slide{
    width: 230px;
    background-color: orange;
    box-sizing: border-box;
    padding: 15px;
}
#box>.bottom>.slide>a{
    font-size: 22px;
    display: block;
    margin: 10px 0;
    text-decoration: none;
    color: #333;
}
#box>.bottom>.content{
    flex: 1;
    box-sizing: border-box;
    padding: 15px;
    background: purple;
    font-size: 100px;
    color: white
}

<script src="./index.js" type="module"></script>

2. components 组件

1.first.js

//组件的html结构
const template = `
	<div id="first">
		first
	</div>
`;
//获取到路由出口对象
const routerView = document.querySelector('.router-view');
//准备一个渲染函数
function render(){
	routerView.innerHTML = template;
}
//导出渲染函数
export default render;

2.second.js

//组件的html结构
const template = `
	<div id="second">
		second
	</div>
`;
//获取到路由出口对象
const routerView = document.querySelector('.router-view');
//准备一个渲染函数
function render(){
	routerView.innerHTML = template;
}
//导出渲染函数
export default render;

3.third.js

//组件的html结构
const template = `
	<div id="third">
		third
	</div>
`;
//获取到路由出口对象
const routerView = document.querySelector('.router-view');
//准备一个渲染函数
function render(){
	routerView.innerHTML = template;
}
//导出渲染函数
export default render;

4.fourth.js

//组件的html结构
const template = `
	<div id="fourth">
		fourth
	</div>
`;
//获取到路由出口对象
const routerView = document.querySelector('.router-view');
//准备一个渲染函数
function render(){
	routerView.innerHTML = template;
}
//导出渲染函数
export default render;

3.router.js

//导入组件模块
import firstCom from './components/first.js';
import secondCom from './components/second.js';
import thirdCom from './components/third.js';
import fourthCom from './components/fourth.js';
// 定义路由表
const router = [
	{
		name : '/first',
		component: firstCom
	},
	{
		name: '/second',
		component: secondCom
	},
	{
		name: '/third',
		component: thirdCom
	},
	{
		name: '/fourth',
		component: fourthCom
	}
];
//导出路由
export default router;

index.js

//1. 导入路由表
import router from './router.js';
//2. 注册hashchange 事件
window.onhashchange = hashChange;
hashChange();
//3. 处理程序
function hashChange(){
	console.log('根据当前hash值，进行改变');
	//获取当前的hash值
	const hash = window.location.hash.slice(1) || '/';
	// console.log(hash);
	//从路由表中找到hash对应的那一个信息
	const info = router.find(item => item.name === hash);
	console.log(info);
	//如果没有内容，不需要后续操作
	if(!info){
		return;
	}
	//渲染页面
	info.component();
}