背景
目前spa单页面,前后端分离模式正在流行中,很多项目中都采用的单页面模式。
- 单页面
众多周知,我们前端在开发的时候,一般将一个index.html 页面放在后端。这个 index.html即我们访问的单页面。我们在首次访问时直接访问后端部署的index.html路径即可。在请求到这个index.html页面后,后续切换页面展示内容不需要再次请求,这正是由于路由的作用。 - 路由
通过某种方式,监听用户动作行为,进而展示不同的内容 - 两种路由
众所周知,前端现在流行两种路由模式,history和hash模式
hash模式
切换时会改变URL中后面的hash部分 即 ** # 后面部分**
-
原理
不同路由对应的hash值不一样,在改变hash值时并不会重新发送请求。 -
实现原理
根据浏览器提供的hashchange方法,监听不同hashchange进而引入不同的内容显示 -
具体实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</meta>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
name="viewport">
</meta>
<title>hash模式</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.tag {
width: 100%;
display: flex;
justify-content: space-around;
}
.app {
width: 100%;
font-size: 15px;
}
</style>
</head>
<body