前端路由+原生JS实现SPA

千锋IT教育

于 2023-05-16 10:27:44 发布

阅读量491

点赞数

分类专栏： JavaScript全解析专栏文章标签：前端 javascript css

本文链接：https://blog.csdn.net/longz_org_cn/article/details/130699947

版权

本文介绍了前端路由的概念，它通过监听Hash变化局部更新页面内容来实现业务场景切换。讲解了单页面应用（SPA）的工作原理，并提供了一个简单的实现方案，包括代码结构调整、路由重定向和懒加载。在懒加载部分，提出了解决首次加载时所有组件都被执行的问题，以提高应用性能。

摘要由CSDN通过智能技术生成

●前端路由
●路由: 就是一一对应关系的集合
●前端路由: 就是一个 url 地址, 对应哪个组件(页面)
●前端路由的本质
○根据地址栏变化(不重新想服务器发送请求), 去局部更新不同的页面内容, 完成前端业务场景切换
●前端路由的思路
○URL 地址栏中的 Hash 值发生了变化
○前端 JS 监听到 Hash 地址的变化 window.onhashchange = () => {}
○前端 JS 把当前 Hash 地址对应的组件渲染到浏览器中
●SPA
○ 单页面应用 (single page application)
○就是只有一张 Web 页面的应用, 是加载单个 HTML 页面并在用户与应用程序交互时, 动态更新该页面的 Web 应用程序
简单实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        .box {
            width: 100%;
            height: 100%;
        }

        .box {
            display: flex;
            flex-direction: column;
        }

        .box>.top {
            width: 100%;
            height: 100px;
            background-color: brown;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
        }

        .box>.bottom {
            flex: 1;
            display: flex;
        }

        .box>.bottom>.slide {
            width: 230px;
            background-color: aqua;
            box-sizing: border-box;
            padding: 15px;
            font-size: 25px;
        }

        .box>.bottom>.slide>a {
            display: block;
            margin: 10px 0;
        }

        .box>.bottom>.content {
            width: 100%;
            background-color: coral;
            box-sizing: border-box;
            padding: 15px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top"> 顶部通栏 </div>
        <div class="bottom">
            <div class="slide">
                <a href="#/pageA">pageA</a>
                <a href="#/pageB"&g