hash路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
}
ul {
list-style: none;
width: 15%;
border: 1px solid #000;
margin: 0;
height: 100%;
padding: 0;
float: left;
}
ul > li {
height: 50px;
line-height: 50px;
text-align: center;
}
ul > li > a {
text-decoration: none;
color: #000;
display: block;
width: 100%;
height: 100%;
}
#content {
width: 84%;
float: left;
height: 100%;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li id="login"><a href="#login">登录</a></li>
<li id="register"><a href="#register">注册</a></li>
<li id="userlist"><a href="#userlist">用户列表</a></li>
<li id="adduser"><a href="#adduser">添加新用户</a></li>
</ul>
<div id="content"></div>
<script>
// 网页的路由分为两种，一种叫做hash路由，一种叫做History路由
var obj = {
login: ` <form>
<label>用户名：</label><input type="text" name="user"><br>
<label>密码:</label><input type="password" name="password" autocomplete><br>
<button type="submit">登录</button>
<button type="reset">重置</button>
</form>`,
register: `<form>
<label>用户名：</label><input type="text" name="user"><br>
<label>密码:</label><input type="password" name="password" autocomplete><br>
<label>电话号码:</label><input type="text" name="tel"><br>
<label>邮箱:</label><input type="text" name="email"><br>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>`,
userlist: ` <table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>电话</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>123123</td>
<td>18363781824</td>
<td>18363781824@qq.com</td>
</tr>
<tr>
<td>李四</td>
<td>asdasd</td>
<td>18638493022</td>
<td>18638493022@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>sfwwer</td>
<td>18618273742</td>
<td>18618273742@qq.com</td>
</tr>
</tbody>
</table>`,
adduser: `<form>
<label>用户名：</label><input type="text" name="user"><br>
<label>密码:</label><input type="password" name="password" autocomplete><br>
<label>电话号码:</label><input type="text" name="tel"><br>
<label>邮箱:</label><input type="text" name="email"><br>
<button type="submit">添加用户</button>
<button type="reset">重置</button>
</form>`,
};
var content, prevLi;
init();
function init() {
// 当hash改变时
window.onhashchange = hashHandler;
content = document.getElementById('content');
// 如果当前地址中有hash，则直接执行hashHandler，就会获取hash，填充内容改变li背景色
if (location.hash) {
hashHandler();
} else {
// 如果没有hash给当前地址后面添加一个hash默认是login
location.href += '#login';
}
}
function hashHandler() {
var name = location.hash.slice(1);
content.innerHTML = obj[name];
changeLi(name);
}
function changeLi(name) {
// 如果上一次存储的li是真值，有值，就把上一次存储的li背景色换为白色
if (prevLi) {
prevLi.style.backgroundColor = '#FFF';
}
// 根据传入name获取当前点击的li
var li = document.getElementById(name);
// 将这个li存储给prevli，就是本次点击的li，下次点击时就可以用来判断上次点击是谁
prevLi = li;
// 将本次点击li设置背景色为灰色
li.style.backgroundColor = '#ccc';
}
</script>
</body>
</html>history路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
}
ul {
list-style: none;
width: 15%;
border: 1px solid #000;
margin: 0;
height: 100%;
padding: 0;
float: left;
}
ul > li {
height: 50px;
line-height: 50px;
text-align: center;
}
#content {
width: 84%;
float: left;
height: 100%;
border: 1px solid #000;
}
.active{
background-color: #ccc;
}
</style>
</head>
<body>
<ul>
<li id="login">登录</li>
<li id="register">注册</li>
<li id="userlist">用户列表</li>
<li id="adduser">添加新用户</li>
</ul>
<div id="content"></div>
<script>
var obj = {
login: ` <form>
<label>用户名：</label><input type="text" name="user"><br>
<label>密码:</label><input type="password" name="password" autocomplete><br>
<button type="submit">登录</button>
<button type="reset">重置</button>
</form>`,
register: `<form>
<label>用户名：</label><input type="text" name="user"><br>
<label>密码:</label><input type="password" name="password" autocomplete><br>
<label>电话号码:</label><input type="text" name="tel"><br>
<label>邮箱:</label><input type="text" name="email"><br>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>`,
userlist: ` <table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>电话</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>123123</td>
<td>18363781824</td>
<td>18363781824@qq.com</td>
</tr>
<tr>
<td>李四</td>
<td>asdasd</td>
<td>18638493022</td>
<td>18638493022@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>sfwwer</td>
<td>18618273742</td>
<td>18618273742@qq.com</td>
</tr>
</tbody>
</table>`,
adduser: `<form>
<label>用户名：</label><input type="text" name="user"><br>
<label>密码:</label><input type="password" name="password" autocomplete><br>
<label>电话号码:</label><input type="text" name="tel"><br>
<label>邮箱:</label><input type="text" name="email"><br>
<button type="submit">添加用户</button>
<button type="reset">重置</button>
</form>`,
};
var lis,content;
init();
function init(){
lis=document.getElementsByTagName("li");
content=document.getElementById("content");
window.onpopstate=popstateHandler;
for(var i=0;i<lis.length;i++){
lis[i].onclick=clickHandler;
}
// if(history.state){
// popstateHandler();
// }else{
// // 当第一次进入时没有历史记录，这时候，可以将当前的历史记录替换为login
// history.replaceState("login","login");
// // 并且执行popstateHandler用来根据当前的History.state改变效果
// popstateHandler();
// }
if(!history.state){
history.replaceState("login","login");
}
popstateHandler();
}
function clickHandler(){
var name=this.id;
content.innerHTML=obj[name];
history.pushState(name,name)
changeLi(name)
}
function popstateHandler(){
// console.log(history.state)//获取存储历史中的name
content.innerHTML=obj[history.state];
changeLi(history.state);
}
function changeLi(name){
// 根据名字获取到对应的li
var li=document.getElementById(name);
// 根据类名获取元素的列表，多个同一个类名的li
var prevLi=document.getElementsByClassName("active")[0];
// 如果上一次添加active的li存在，将它的class设置为""
if(prevLi) prevLi.className="";
// 设置当前li的class为active
li.className="active";
}
</script>
</body>
</html>
![[云讷科技]Kerloud Falcon四旋翼飞车虚拟仿真空间发布](https://i-blog.csdnimg.cn/direct/e5cb55bc9d894ffb8a6e05b6ef317b14.png#pic_center)
