✨ 前端路由的核心原理 👌

什么是前端路由？

前端路由是单页应用（SPA）中的核心技术，它允许应用在不刷新整个页面的情况下，根据 URL 的变化来切换视图组件。这种技术使得用户体验更加流畅，减少了页面加载时间，同时保持了 URL 的可分享性和浏览器历史记录的可用性。

前端路由的主要作用：

无刷新页面切换：在不重新加载整个页面的情况下更新视图内容
状态保持：切换页面时保持应用状态
提升用户体验：减少页面加载时间，提供更流畅的交互体验
减轻服务器压力：减少对服务器的请求次数

前端路由的实现方式

目前主流的前端路由实现方式有两种：基于 URL 哈希（Hash 模式）和基于 HTML5 History API（History 模式）。下面我们将通过简单的代码示例来理解这两种模式的核心原理。

Hash 模式

哈希模式是前端路由最早的实现方式，它利用 URL 中的哈希值（#后面的部分）来模拟不同的路径。当哈希值变化时，页面不会重新加载，但可以通过监听hashchange事件来检测变化并更新视图。

特点：

兼容性好，支持所有浏览器
URL 中包含#，不太美观
服务器无需特殊配置
不支持 SEO 优化

实现原理：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- 修改url -->
        <a href="#/home">home</a>
        <a href="#/about">about</a>
        <a href="#/contact">contact</a>

        <div id="app">
            <!-- 在此处渲染 -->
        </div>

        <script>
            const routes = {
                "/home": {
                    template: "<h2>首页</h2><p>这是首页内容</p>",
                },
                "/about": {
                    template: "<h2>关于我们</h2><p>这是关于我们的内容</p>",
                },
                "/contact": {
                    template: "<h2>联系我们</h2><p>这是联系我们的内容</p>",
                },
                "/404": {
                    template: "<h2>404 Not Found</h2><p>页面不存在</p>",
                },
            };
            // 渲染函数
            function render() {
                const hash = location.hash || "#/home";
                const path = hash.slice(1);
                const content = routes[path] || routes["/404"];
                document.getElementById("app").innerHTML = content.template;
            }
            // 监听hash值变化并重新渲染
            window.addEventListener("hashchange", render);
            // 初始化渲染
            render();
        </script>
    </body>
</html>

在线 demo

History 模式

History 模式基于 HTML5 提供的 History API（主要是 pushState 和 replaceState 方法），可以在不刷新页面的情况下修改浏览器的 URL。这种模式下的 URL 更加美观，没有#符号，看起来就像普通的 URL 一样。

特点：

URL 更加美观，没有#符号
可以更好地支持 SEO
需要服务器配置支持（否则刷新页面会 404）
对低版本浏览器兼容性较差

实现原理：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <a href="/home">home</a>
        <a href="/about">about</a>
        <a href="/contact">contact</a>

        <div id="app">
            <!-- 在此处渲染 -->
        </div>

        <script>
            const routes = {
                "/home": {
                    template: "<h2>首页</h2><p>这是首页内容</p>",
                },
                "/about": {
                    template: "<h2>关于我们</h2><p>这是关于我们的内容</p>",
                },
                "/contact": {
                    template: "<h2>联系我们</h2><p>这是联系我们的内容</p>",
                },
                "/404": {
                    template: "<h2>404 Not Found</h2><p>页面不存在</p>",
                },
            };
            const links = document.querySelectorAll("a");
            links.forEach((link) => {
                link.addEventListener("click", (e) => {
                    e.preventDefault(); // 防止请求url刷新页面
                    const path = e.target.pathname; // 通过a标签获取路径
                    navigate(path);
                });
            });

            function navigate(path) {
                history.pushState({ path }, "", path); // 不刷新页面修改url，同时保留状态
                render(path);
            }

            function render(path) {
                const content = routes[path] || routes["/404"];
                document.querySelector("#app").innerHTML = content.template;
            }

            // 监听浏览器前进后退事件，触发popstate
            window.addEventListener("popstate", (e) => {
                render(e.state.path); // 根据pushState方法中保留的状态进行渲染
            });

            render("/home");
        </script>
    </body>
</html>

在线演示

两种模式的对比

特性	Hash 模式	History 模式
URL 格式	包含#符号	普通 URL 格式，更美观
浏览器兼容性	所有浏览器	仅 HTML5 支持的浏览器
服务器配置	无需特殊配置	需要配置所有路由都指向 index.html
SEO 友好度	较差，搜索引擎一般忽略#后内容	较好，可被搜索引擎正常抓取
刷新页面	可以正常工作	没有适当服务器配置会返回 404

总结

前端路由是现代单页应用不可或缺的一部分，它使得应用能够在不刷新页面的情况下实现视图切换，提供更好的用户体验。Hash 模式和 History 模式各有优缺点，可以根据项目需求选择合适的模式。

无论使用哪种模式，理解其背后的原理对于解决路由相关问题和优化应用性能都非常重要。本文通过简单的代码示例展示了两种模式的核心实现原理，希望能帮助读者更好地理解前端路由的工作方式。