实现简单路由

Question

上面实现了简易的 hash 路由， 也可以使用 history 的 pushState 和监听 popState 事件即可

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event
2. https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

const A = {
    render() {
        return 'AAA'
    }
}

class Router {
    routes = new Map()
    route = {
        path: '/'
    }
    routeView = null
    constructor(el) {
        this.routeView = el
        this.init()
    }

    init() {
        window.addEventListener('hashchange', () => {
            this.routeTo()
        })
        window.addEventListener('load', () => {
            this.routeTo()
        })
    }

    push(path) {
        location.hash = `#${path}`
    }


    add(routeName, component) {
        this.routes.set(routeName, component)
    }

    routeTo() {
        this.route.path = location.hash.slice(1) || '/'

        const component = this.routes.get(this.route.path)
        console.log({component})
        const app = this.routeView
        if (component) {
            app.innerHTML = component.render()
        } else {
            app.innerHTML = `<h1>404 Not Found</h1>`;
        }
    }
}

const router = new Router(document.querySelector('body'))
router.add('/a', A)


router.push('/a')
console.log(router.route)