实现一个单页面spa1,监听地址栏中hash变化驱动界面变化,下面是router的hash实现代码(简单版本)
- 创建Router类
- 创建一个对象用于保存rul以及该url对应的处理
- Router类中创建router方法将url绑定对应的处理方法
- Router类中创建push方法对指定url执行绑定的方法
class Router {
constructor() {
// 用于保存url以及对于的函数
this.rou = {}
}
router(url,fn) {
this.rou[url] = fn
}
push(url) {
this.rou[url] && this.rou[url]()
}
}
window.myrouter = new Router()
myrouter.router('/',()=>{console.log('这是url/');})
myrouter.router('/hello',()=>{console.log('hello');})
myrouter.push('/')
myrouter.push('/hello')