实现简单路由 #129
Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a onclick="location.href='#/'">11111</a></li>
<li><a href="#/admin">22222222</a></li>
<li><a onclick="location.href='#/server'">333333333</a></li>
</ul>
<div id="div">展示</div>
<script type="text/javascript">
function Router(){
this.routes={}
this.curUrl=''
//添加回调函数
this.route=function(path,callback){
this.routes[path]=callback||function(){}
}
//执行回调函数
this.refresh=function(){
//获取url
this.curUrl=location.hash.slice(1)||'/'
this.routes[this.curUrl]()
}
//监听load和hashchange
this.init=function(){
window.addEventListener('load',this.refresh.bind(this),false)
window.addEventListener('hashchange',this.refresh.bind(this),false)
}
}
let res=document.getElementById('div')
let R=new Router()
//触发监听
R.init()
R.route('/',function(){
res.style.backgroundColor='pink'
res.innerHTML='11111'
})
R.route('/admin',function(){
res.style.backgroundColor='blue'
res.innerHTML='22222'
})
R.route('/server',function(){
res.style.backgroundColor='pink'
res.innerHTML='333333'
})
</script>
</body>
</html> |
|
hash版本 <title>Document</title> b a <script> location.replace; class Router { constructor(routes = {}) { this.routes = routes; this.curUrl = "/"; } addRoute(path, fn) { this.routes[path] = fn; } hashchange() { this.curUrl = location.hash.slice(1) || "/"; this.routes[this.curUrl]?.(); } init() { window.addEventListener( "hashchange", this.hashchange.bind(this) ); window.addEventListener("load", this.hashchange.bind(this)); } } const router = new Router({ "/": function () { console.log("谁懂"); }, "/a": function () { console.log("我是A"); }, "/b": function () { console.log("我是B"); }, }); router.init(); </script> |
| <title>Document</title> b a <script> // class Router { // constructor(routes = {}) { // this.routes = routes; // this.curUrl = "/"; // } // addRoute(path, fn) { // this.routes[path] = fn; // } // hashchange() { // this.curUrl = location.hash.slice(1) || "/"; // this.routes[this.curUrl]?.(); // } // init() { // window.addEventListener( // "hashchange", // this.hashchange.bind(this) // ); // window.addEventListener("load", this.hashchange.bind(this)); // } // } class Router { constructor(routes = {}) { this.routes = routes; this.curUrl = "/"; } addRoute(path, fn) { this.routes[path] = fn; } urlchange() { console.log("?"); this.curUrl = location.pathname || "/"; this.routes[this.curUrl]?.(); } init() { window.addEventListener( "popstate", this.urlchange.bind(this) ); window.addEventListener("load", this.urlchange.bind(this)); } } const router = new Router({ "/": function () { console.log("谁懂"); }, "/a": function () { console.log("我是A"); }, "/b": function () { console.log("我是B"); }, }); router.init(); </script> |
|
要最后init <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a onclick="location.href='#/'">11111</a></li>
<li><a href="#/admin">22222222</a></li>
<li><a onclick="location.href='#/server'">333333333</a></li>
</ul>
<div id="div">展示</div>
<script type="text/javascript">
let res=document.getElementById("div")
const Router=function(){
this.route={}
this.curUrl=''
this.addRoute=(path,cb)=>{
this.route[path]=cb||function(){}
console.log(this.route);
}
this.refresh=()=>{
this.curUrl=location.hash.split('#')[1]||'/'
console.log(this.route);
this.route[this.curUrl]()
}
let res=document.getElementById('div')
this.init=()=>{
console.log(123);
window.addEventListener("load",this.refresh(),false)
window.addEventListener("hashchange",this.refresh(),false)
}
}
const router=new Router()
router.addRoute("/",()=>{
res.style.backgroundColor='pink'
res.innerHTML='11111'
})
router.addRoute("/admin",()=>{
res.style.backgroundColor='black'
res.innerHTML='11111'
})
router.init()
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: