基于URL锚点的路由系统

好处：不会显式刷新，语法简单，使用原生JS

router.js

class HashRouter {
    constructor(container) {
        this.container = container;
        this.routes = {};

        this.defaultHandler = () => this.show404(
            this.container
        );

        this.normalizePath = path => {
            if (!path) return '/';
            return path.startsWith('/') ? path : `/${path}`;
        };

        window.addEventListener('hashchange', () => this.handleRoute());
        window.addEventListener('load', () => this.handleRoute());
    }

    addRoute(path, handler) {
        const normalizedPath = this.normalizePath(path);
        this.routes[normalizedPath] = handler;
    }

    setDefaultHandler(handler) {
        this.defaultHandler = handler;
    }

    handleRoute() {
        const rawHash = window.location.hash.slice(1);
        const currentPath = this.normalizePath(rawHash);
        
        const handler = this.routes[currentPath] || this.defaultHandler;
        this.container.innerHTML = '';
        handler(this.container);
    }

    show404(container) {
        container.innerHTML = '<h1>404 Not Found</h1>';
    }
}

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HashRouter</title>
</head>

<body>

    <h1>HashRouter</h1>

    <div>
        <a href="#/">Home</a>
        <a href="#/about">About</a>
        <a href="#/contact">Contact</a>
        <a href="#/null">Null</a>
    </div>
    <div id="main-containter" style="border: 1px solid black; margin: auto; padding: 20px;"></div>

    <script src="/router.js"></script> <!-- 引入JS文件 -->
    <script>
        // 创建HashRouter实例
        const router = new HashRouter(document.getElementById("main-containter"));

        // 定义路由规则
        router.addRoute("/", (containter) => {
            containter.innerHTML = "Welcome to the homepage";
        })
        router.addRoute("/about", (containter) => {
            containter.innerHTML = "About us";
        })
        router.addRoute("/contact", (containter) => {
            containter.innerHTML = "Contact us";
        })

        // 设置默认路由 (若不指定则默认插入 404 Not Found)
        router.setDefaultHandler((containter) => {
            containter.innerHTML = "Page not found";
        });

        // 监听hashchange事件
        router.handleRoute();
    </script>

</body>

</html>

创建HashRouter实例时需要传入容器对象document.getElementById("main-containter")
创建路由时处理函数会被传入 containter 代表容器对象
运行处理函数前容器对象会被清空

基于URL锚点的路由系统

评论已关闭