<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
</style>
<script>
// hash 使用时请将history相关注释，因为DOMContentLoaded方法和hashchange冲突
function Router(){
this.curUrl='';
this.routes=[];
this.refresh=function(){
this.curUrl='/' + location.hash.slice(1);
console.log(location.hash,this.curUrl);
this.routes[this.curUrl]();
};
this.init=function(){
window.addEventListener('hashchange',this.refresh.bind(this));
window.addEventListener('load',this.refresh.bind(this));
};
this.route=function(path,callback){
console.log(callback);
this.routes[path] = callback || function(){};
}
}
var r= new Router();
r.route('/',function(){
var domdiv = document.querySelector("#text");
domdiv.innerText = '1';
});
r.route('/2',function(){
var domdiv = document.querySelector("#text");
domdiv.innerText = '2';
});
r.route('/3',function(){
var domdiv = document.querySelector("#text");
domdiv.innerText = '3';
});
r.init();
// history 使用时请将hash相关注释，因为DOMContentLoaded方法和hashchange冲突
window.addEventListener('DOMContentLoaded', onLoad)
window.addEventListener('popstate', onPopState)
var routerView = null
function onLoad () {
routerView = document.querySelector('#routeView')
onPopState()
// 拦截 <a> 标签点击事件默认行为， 点击时使用 pushState 修改 URL并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
var linkList = document.querySelectorAll('a[href]')
linkList.forEach(el => el.addEventListener('click', function (e) {
e.preventDefault()
history.pushState(null, '', el.getAttribute('href'))
onPopState()
}))
}
// 路由变化时，根据路由渲染对应 UI
function onPopState () {
switch (location.pathname) {
case '/home':
routerView.innerHTML = 'Home'
return
case '/about':
routerView.innerHTML = 'About'
return
default:
return
}
}
</script>
</head>
<body>
<!-- // hash -->
<a href="#">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<h1 id="text">1</h1>
<!-- // history -->
<ul>
<li><a name="home" href='/home'>home</a></li>
<li><a name="about" href='/about'>about</a></li>
<div id="routeView"></div>
</ul>
</body>
</html>
前端路由实现demo（Hash+Histroy）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前端路由的核心原理是更新页面但不向服务器发起请求，目前在浏览器环境中这一功能的实现主要有两种方式： 利用URL中的...
- SPA需要在不刷新页面的情况下做页面更新的能力，这就需要引入前端路由，实际上，前端路由是利用了浏览器的hash或h...
