前端路由原理：Hash与History模式实现

#

#

hashchange

example.com/#/home

example.com/#/about

hashchange

/about

#

#

pushState

replaceState

popstate

example.com/home

example.com/about

history.pushState()

/about

popstate

window.location.pathname

#

example.com/about

/about

index.html

index.html

#

class SimpleRouter {
    constructor(mode = 'hash') {
        this.mode = mode; // 'hash' or 'history'
        this.routes = {}; // 存储路由映射：{ '/path': callbackFunction }
        this.currentHash = ''; // 用于Hash模式追踪当前哈希
        this.init();
    }

    // 注册路由
    route(path, callback) {
        this.routes[path] = callback;
    }

    // 路由初始化和事件绑定
    init() {
        if (this.mode === 'hash') {
            window.addEventListener('hashchange', this.onHashChange.bind(this));
            window.addEventListener('load', this.onHashChange.bind(this)); // 页面加载时也触发一次
        } else { // history mode
            window.addEventListener('popstate', this.onPopState.bind(this));
            window.addEventListener('load', this.onPopState.bind(this));
            // 劫持所有<a>标签的点击事件，阻止默认跳转，改为pushState
            document.body.addEventListener('click', e => {
                if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('/')) {
                    e.preventDefault();
                    this.push(e.target.getAttribute('href'));
                }
            });
        }
        // 首次加载时，立即执行一次路由匹配
        if (this.mode === 'hash') {
            this.onHashChange();
        } else {
            this.onPopState();
        }
    }

    // Hash模式下的处理逻辑
    onHashChange() {
        const hash = window.location.hash.slice(1) || '/'; // 获取哈希值，如果为空则默认为根路径
        if (this.currentHash === hash && this.currentHash !== '') { // 避免重复渲染
            return;
        }
        this.currentHash = hash;
        this.matchRoute(hash);
    }

    // History模式下的处理逻辑
    onPopState() {
        const path = window.location.pathname;
        this.matchRoute(path);
    }

    // History模式下的页面跳转
    push(path) {
        history.pushState({}, '', path);
        this.onPopState(); // 手动触发路由匹配和渲染
    }

    // 匹配路由并执行回调
    matchRoute(path) {
        const handler = this.routes[path];
        if (handler) {
            handler(); // 执行对应的回调函数，这里可以替换为渲染组件的逻辑
        } else {
            // 404处理
            console.warn(`404 Not Found: ${path}`);
            // 可以渲染一个404组件
        }
    }
}

// 示例用法：
const router = new SimpleRouter('history'); // 或者 new SimpleRouter('hash');

router.route('/', () => {
    document.getElementById('app').innerHTML = '<h1>Home Page</h1><p>Welcome to the home page!</p>';
});

router.route('/about', () => {
    document.getElementById('app').innerHTML = '<h1>About Us</h1><p>Learn more about our company.</p>';
});

router.route('/products', () => {
    document.getElementById('app').innerHTML = '<h1>Our Products</h1><p>Check out our amazing products.</p>';
});

// 在HTML中，你需要一个id为'app'的容器来显示内容
// <div id="app"></div>
// <nav>
//   <a href="/">Home</a>
//   <a href="/about">About</a>
//   <a href="/products">Products</a>
// </nav>