什么是JavaScript路由

JavaScript路由是一种通过JavaScript对页面URL进行控制的技术，它可以实现局部刷新，无需完全刷新页面即可展示新的内容，并且可以通过状态管理实现前端路由系统。

如何制作自己的JavaScript路由

步骤如下：

1. 创建HTML页面

我们以一个简单的单页面应用为例，创建一个HTML页面作为路由的载体。在HTML页面中，我们可以根据自己的需求定义不同的页头、页脚、导航栏等元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Router App</title>
</head>
<body>
    <nav>
        <a href="#/">Home</a>
        <a href="#/about">About</a>
        <a href="#/contact">Contact</a>
    </nav>
    <div id="content">
        <h1>Welcome Home!</h1>
        <p>Content will load here...</p>
    </div>
</body>
</html>

2. 实现路由逻辑

为了实现JavaScript路由，我们需要监听window对象的hashchange事件。当URL中的哈希值发生变化时，我们就可以通过自定义的路由规则来决定显示哪个页面。比如我们可以定义一个名为router的函数，来控制路由：

function router() {
    let hash = window.location.hash.substr(1);
    if (hash === "") {
        document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
    } else if (hash === "about") {
        document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
    } else if (hash === "contact") {
        document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
    } else {
        document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
    }
}

window.addEventListener("hashchange", router);
router();

这个函数的作用是根据不同的哈希值，决定页面显示的内容。在这个示例中，我们根据哈希值的不同，来显示不同的静态页面。

3. 处理路由参数

如果我们想要传递一些参数，比如说我们想让/about页面根据用户不同的参数来动态显示不同的内容，那应该怎么处理呢？

一个常见的方法是在哈希值中使用动态参数，例如#about/:id。这里的id就是参数，我们可以用正则表达式来提取它，然后根据这个参数来显示不同的内容。

function extractParams(template, request) {
    const params = {}; 
    const res = template.exec(request);
    if (res) {
        for (let i = 1; res[i]; i++) {
            params[res[i].split('=')[0]] = res[i].split('=')[1];
        }
    }
    return params;
}

function router() {
    let hash = window.location.hash.substr(1);
    let params = extractParams(/about\/(\w+)/.exec(hash), hash);
    if (hash === "") {
        document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
    } else if (hash === "about") {
        if (params && params.id) {
            document.getElementById("content").innerHTML = "<h1>About Us</h1><p>Showing content for user " + params.id + "</p>";
        } else {
            document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
        }
    } else if (hash === "contact") {
        document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
    } else {
        document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
    }
}

window.addEventListener("hashchange", router);
router();

在这个示例中，我们定义了一个extractParams函数，用于提取哈希值中的参数。然后在router函数中，我们根据提取到的参数来动态显示不同的内容。

示例

以上是制作自己的JavaScript路由的具体过程，下面我为大家提供两个适用示例。

1. 基本的SPA应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Router App</title>
</head>
<body>
    <nav>
        <a href="#/">Home</a>
        <a href="#/about">About</a>
        <a href="#/contact">Contact</a>
    </nav>
    <div id="content">
        <h1>Welcome Home!</h1>
        <p>Content will load here...</p>
    </div>
    <script>
        function router() {
            let hash = window.location.hash.substr(1);
            if (hash === "") {
                document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
            } else if (hash === "about") {
                document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
            } else if (hash === "contact") {
                document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
            } else {
                document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
            }
        }

        window.addEventListener("hashchange", router);
        router();
    </script>
</body>
</html>

2. 处理动态路由参数的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Router App</title>
</head>
<body>
    <nav>
        <a href="#/">Home</a>
        <a href="#/about">About</a>
        <a href="#/about/123456">About User #123456</a>
        <a href="#/contact">Contact</a>
    </nav>
    <div id="content">
        <h1>Welcome Home!</h1>
        <p>Content will load here...</p>
    </div>
    <script>
        function extractParams(template, request) {
            const params = {}; 
            const res = template.exec(request);
            if (res) {
                for (let i = 1; res[i]; i++) {
                    params[res[i].split('=')[0]] = res[i].split('=')[1];
                }
            }
            return params;
        }

        function router() {
            let hash = window.location.hash.substr(1);
            let params = extractParams(/about\/(\w+)/.exec(hash), hash);
            if (hash === "") {
                document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
            } else if (hash === "about") {
                if (params && params.id) {
                    document.getElementById("content").innerHTML = "<h1>About Us</h1><p>Showing content for user " + params.id + "</p>";
                } else {
                    document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
                }
            } else if (hash === "contact") {
                document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
            } else {
                document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
            }
        }

        window.addEventListener("hashchange", router);
        router();
    </script>
</body>
</html>

以上就是制作自己的JavaScript路由的完整攻略，希望对大家有所帮助。