BOM学习实用路线（5）——BOM的hash路由实现原理

最新推荐文章于 2024-10-13 20:00:53 发布

溜_x_i_a_o_迪

最新推荐文章于 2024-10-13 20:00:53 发布

阅读量291

点赞数

分类专栏： Web前端原生JavaScript # JS-BOM 文章标签： hash html bom 前端 javascript

本文链接：https://blog.youkuaiyun.com/u013946061/article/details/105468337

版权

原生JavaScript 同时被 3 个专栏收录

34 篇文章

订阅专栏

Web前端

32 篇文章

订阅专栏

JS-BOM

7 篇文章

订阅专栏

hash路由实现原理

路由（routing）: 根据路径决定前端显示的视图
实现常规页面跳转：
9.hash01.html

<!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>
    <nav>
        <a href="9.hash01.html"></a>
        <a href="10.hash02.html"></a>
        <a href="11.hash03.html"></a>
    </nav>
    <div>
        这是第一个视图
    </div>
</body>
</html>

10.hash02.html

<!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>
    <nav>
        <a href="9.hash01.html"></a>
        <a href="10.hash02.html"></a>
        <a href="11.hash03.html"></a>
    </nav>
    <div>
        这是第二个视图
    </div>
</body>
</html>

11.hash03.html

<!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>
    <nav>
        <a href="9.hash01.html"></a>
        <a href="10.hash02.html"></a>
        <a href="11.hash03.html"></a>
    </nav>
    <div>
        这是第二个视图
    </div>
</body>
</html>

在这里插入图片描述

用hash实现页面跳转
注意：超级链接（a标签），又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。在JS中hash就是在html中锚点。
先看看什么是hash！！！
window.onhashchange：监听location中的hash变化了

<!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>
<nav>
    <a href="#view1">视图1</a>
    <a href="#view2">视图2</a>
    <a href="#view3">视图3</a>
</nav>
<div>
    这是第一个视图
</div>
<script>
    // 监听location中的hash变化了
    window.onhashchange = ()=>{
        console.log(location.hash);
    };
</script>
</body>
</html>

在这里插入图片描述

现在用hash实现页面跳转

<!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>
<nav>
    <a href="#view1">视图1</a>
    <a href="#view2">视图2</a>
    <a href="#view3">视图3</a>
</nav>
<div id="view">
    这是第一个视图
</div>
<script>
{
    let view = document.querySelector("#view");
    window.onhashchange = setView;
    function setView(){
        let hash = location.hash;
        console.log(hash);
        switch (hash) {
            case "#view1":
                view.innerHTML = "这是第一个视图";
                break;
            case "#view2":
                view.innerHTML = "这是第二个视图";
                break;
            case "#view3":
                view.innerHTML = "这是第三个视图";
                break;
            default:
                break;
        }
    }
}
</script>
</body>
</html>