🌈个人主页：前端青山
🔥系列专栏：JavaScript篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-spa单页面路由
目录
# 基于SPA的单页面路由
关于单页应用
单页应用的实现
实现改变URL页面不刷新
监听URL的变化，执行页面替换逻辑
两种实现的比较
代码实现
代码升级（组件化开发）
# 基于SPA的单页面路由
关于单页应用
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。简单来说就是用户只需要加载一次页面就可以不再请求，当点击其他子页面时只会有相应的URL改变而不会重新加载。
- 大部分用于： 移动端 / PC端的后台管理系统
单页应用的实现
- 依赖hash的改变（锚点）
- 依赖历史记录(history)
- 前端路由：在页面中同一个位置，根据不同的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的变化，执行页面替换逻辑
- 对于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> -
components 组件
-
first.js
//组件的html结构 const template = ` <div id="first"> first </div> `; //获取到路由出口对象 const routerView = document.querySelector('.router-view'); //准备一个渲染函数 function render(){ routerView.innerHTML = template; } //导出渲染函数 export default render; -
second.js
//组件的html结构 const template = ` <div id="second"> second </div> `; //获取到路由出口对象 const routerView = document.querySelector('.router-view'); //准备一个渲染函数 function render(){ routerView.innerHTML = template; } //导出渲染函数 export default render; -
third.js
//组件的html结构 const template = ` <div id="third"> third </div> `; //获取到路由出口对象 const routerView = document.querySelector('.router-view'); //准备一个渲染函数 function render(){ routerView.innerHTML = template; } //导出渲染函数 export default render; -
fourth.js
//组件的html结构 const template = ` <div id="fourth"> fourth </div> `; //获取到路由出口对象 const routerView = document.querySelector('.router-view'); //准备一个渲染函数 function render(){ routerView.innerHTML = template; } //导出渲染函数 export default render;
-
-
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(); }
