Router.js脚本
主要的是 将路径的名字与方法对应起来 ,这样我们就能通过路径扎到对应的方法。这个是一个简单的路由
export class Router{
constructor(){
this.routes = {};
this.curUrl = '';
this.init();
}
path(path, callback){
console.log(this.routes)
this.routes[path] = callback || function(){};
};
refresh(){
this.curUrl = location.hash.slice(1) || '/';
this.routes[this.curUrl]();
};
init(){
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
}
使用
import { Router } from './Tool/Router.js';
class Test(){
constructor(){
//对路由页面进行管理
this.router = this.routerFun();
//-->跳转指定页面
//跳转至主页面
this.router.push(this.router.hash.main);
//打开当前签子的具体内容的页面
this.router.push(this.router.hash.content);
}
}
/**
* 对路由的管理
*/
routerFun() {
//创建跳转路径
let hash = {
content: '/content',
main: '/main',
}
let { content, main } = hash;
//创建路由
let router = new Router();
//路由的创建
router.path(content, () => {
//路有事件
});
router.path(main, () => {
//路有事件
});
//返回对象提供使用 枚举路径 提供跳转的方法
return {
hash,
push: function (hashContent) {
location.href = `#${hashContent}`;
}
}
}