单页面学习

宇宙超级无敌暴龙嗜血战士

于 2023-02-22 18:11:42 发布

阅读量80

点赞数

文章标签：前端 javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_48837272/article/details/129163307

版权

单页面应用 SPA(single page application)

概念

一个页面（）+多个js代码片段

原理

在不刷新整个页面的情况下，进行页面跳转

前端领域

a的锚点跳转就可以帮我们实现这个技术

页面跳转时，a标签#后面的内容在变化

拿到#后面的值

location.href 需要截取

location.hash直接拿到#以及后面的值

监听点击不同锚点

window.οnhashchange=function(){} #后面的值改变就触发

案例

选项卡（hash模式版）

        div {
            width: 200px;
            height: 80px;
            background-color: palegreen;
        }

    <a href="#one"> one</a>
    <a href="#two"> two</a>
    <a href="#three"> three</a>
    <div id="router-view"></div>

    var oDiv = document.querySelector("div")
    // hash变化才会执行
    window.onhashchange = function () {
        doRoute()
    }
    // 打开页面执行
    doRoute()
    function doRoute() {
        switch (location.hash.slice(1)) {
            case "one":
                oDiv.innerHTML = 'one的内容'
                break;
            case "two":
                oDiv.innerHTML = 'two的内容'
                break;
            case "three":
                oDiv.innerHTML = 'three的内容'
                break;
            default:
                oDiv.innerHTML = 'one的内容'
                break;
        }
    }