_island Record

Appearance

📁 标签
JavaScript

hash ​

利用当前浏览器中的hash属性值作为页面路径，实现页面切换效果。

html
<body>
    <button onClick="to('#/home')">home</button>
    <button onClick="to('#/home/child')">home child</button>
    <script>
        function parseHash(hash) {
            // 删除#号
            hash = hash.replace(/^#/, "");
            // 获取?后面的参数，可能没有数据
            const parsed = hash.split("?");
            // 返回路径和参数
            return {
                pathname: hash,
                search: parsed[1],
            };
        }


        function hashChange() {
            // 解析URL
            const { pathname, search } = parseHash(location.hash);
            console.log(pathname)
            switch (pathname) {
                case "/home":
                    document.body.innerHTML = `home page`;
                    return;
                case "/home/child'":
                    document.body.innerHTML = `home child page`;
                    return;
            }

        }

        function to(target, isReplace = false) {
            location.hash=target
            hashChange();
        }

        window.addEventListener("hashchange", hashChange);

        window.onload = () => {
            hashChange()
        }
    </script>
</body>

hash优缺点 ​

优点

  • 兼容性比较好
  • 无需服务器端配置

缺点

  • #后面的值 服务器无法得知
  • 可能会有锚点冲突

history ​

核心是利用historyApi来实现的，通过pushState，replaceState和popstate方法实现页面“切换”效果

html
<body>
    <button onClick="to('/home')">home</button>
    <button onClick="to('/home/child')">home child</button>
    <script>
        function historyChange() {
            const { pathname, search } = location
            // 根据url渲染内容
            switch (pathname) {
                case "/home":
                    document.body.innerHTML = `home page`;
                    return;
                case "/home/child":
                    document.body.innerHTML = `home child page`;
                    return;
            }
        }

        function to(target, isReplace = false) {
            if (isReplace) {
                history.replaceState(null, "", target);
            } else {
                history.pushState(null, "", target);
            }
            historyChange();
        }

        window.addEventListener("popstate", historyChange);
        window.onload = () => {
            historyChange()
        }
    </script>
</body>

history优缺点 ​

优点

  • 服务器端可以获取到完整的URL地址
  • 前端监控友好
  • SEO优化较好

缺点

  • 服务器需要额外配置转发
  • 旧浏览器兼容问题