第三十章 单页面应用程序（SPA）

一、SPA

1、含义：SPA: single page application。指的是一个网站里面只有一个页面 , 但是里面的内容不少。

• 配套一个入口文件 , 比如叫做: index.html 就组成了一个网站

• 类似选项卡的一种状态、大部分用于移动端 / PC端的后台管理系统

2、切换方式

• 形式1: 依赖于 hash 值的改变(锚点)

        =>这种形式比较简单 , 不需要依赖于服务器

• 形式2: 依赖于历史记录(history)

        =>需要依赖服务器 , 改的是服务器的地址信息

二、认识单页面应用

1、捕获hash内容，来显示不同的内容

• 语法：window.location.hash
• 返回值: 改地址栏内的hash值 , 也就是锚点值

2、hashchange 事件

• 触发时机: 当当前地址栏中的 hash 值发生改变的时候触发
• 这个事件应该绑给window , 因为是浏览器窗口中的内容发生了改变

3、确认一个路由出口

•  就是在页面上标记一个标签 , 将来所有的路由内容渲染在该标签内部
• 类名为 router-view 的标签 表示我们的路由出口

    <div class="box">
        <div class="top">顶部通栏</div>
        <div class="bottom">
            <div class="slide">
                <a href="#/first">first</a>
                <a href="#/second">second</a>
                <a href="#/third">third</a>
                <a href="#/fourth">fourth</a>
            </div>
            <div class="content router-view">
                <!-- 路由出口标签, 将来切换路由的时候, 所有显示的结构都插入到这个标签内部 -->
            </div>
        </div>
      </div>

        // 确认所有的路由结构
        const template1 = `<div>first</div>`
        const template2 = `<div>second</div>`
        const template3 = `<div>third</div>`
        const template4 = `<div>fourth</div>`

        // 第零步: 获取元素 , 就是获取路由入口标签
        const routerView = document.querySelector('.router-view')

        // 第一步: 我们要捕获浏览器地址栏 hash 值的改变
        // console.log(window.location.hash);
        // 绑定事件 
        window.onhashchange = function () {
            // console.log('地址栏 hash 值改变了 :',window.location.hash);
            // 判断之前我们先拿到 hash 值
            const { hash } = window.location
            // 上面我们可以拿到 hash 值了  我们只要判断 hash 值 , 进行不同页面结构的渲染就可以了
            if (hash === '#/first') {
                routerView.innerHTML = template1
            } else if (hash === '#/second') {
                routerView.innerHTML = template2
            }  else if (hash === '#/third') {
                routerView.innerHTML = template3
            } else if (hash === '#/fourth') {
                routerView.innerHTML = template4
            }
        }

三、懒加载设置

1、目的：实现路由懒加载，在这个路由文件中不在使用同步导入文件了

2、问题：不在使用同步导入文件之后，路由表没有产生相对应的问题

3、解决办法：后面跟一个函数，当路由器切换到它的时候，执行这个函数

4、异步导入文件：

• 语法: import('地址')
• 这个是按照 promise 的语法来封装的函数
• 但是这个时候没有内容显示
• 返回值不是该地址内导出的内容 , 而是一个 promise 对象
• 需要通过then()来拿到结果