路由原理：
1、准备视图(html)
2、准备路由的路线(可以是一个对象，键名是路线名称和值是视图地址)
3、通过hash地址的路线，获取“视图地址”
4、在指定标签中，加载需要的视图页面
index.html同级有detail.html和list.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#/detail">详情页</a></li><!-- 定义跳转的链接是什么 注意：href填的是hash地址，这里的 #/ 不要去掉 ，为的是不改变域名(地址栏中#前面的为域名-->
<li><a href="#/list">列表页</a></li>
</ul>
<div id="box">
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
let router = { /* 创建一个路由,是一个对象,对象里面kv存放hash值和路径页面 */
"#/detail":'./detail.html',
"#/list" : './list.html'
}
window.addEventListener('hashchange',()=>{/* 通过监听页面的hash值变更,调用jq的load方法,把指定路径的html加载到节点上 */
console.log(location.hash)
// $('#box').load(router[location.hash])/* jquery中实现在指定容器中加载页面,通过中括号语法取到对应页面的路径,加载到id为box的节点上 */
window.location.href = `${router[location.hash]}`; //js中实现跳转
})
</script>
网友评论