简单个hash路由模块

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}`;
            }
        }
    }