SPA单页面应用

1.书写HTML

    <div class="box">
    <div class="top"> 顶部通栏 </div>
    <div class="bottom">
        <div class="slide">
            <a href="#/pageA">pageA</a>
            <a href="#/pageB">pageB</a>
            <a href="#/pageC">pageC</a>
            <a href="#/pageD">pageD</a>
        </div>
        <div class="content router-view"></div>
    </div>
</div>

2.书写CSS

    * {
        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: 100px;
    }

3.引入JS整合文件

    <script src="./index.js" type="module"></script>

4.创建插件文件夹components

5.书写JS小模块(可更换ABCD)

// 1. html
const strHtml = "<div>内容区_pageA</div>";

// 2. js
const routerView = document.querySelector(".router-view");
function rander() {
    routerView.innerHTML = strHtml;
}

export default rander

// 3. css
// 这个位置应该还有对应的 CSS 的书写, 但是目前做不到, 需要将来学习 webpack, 所以此处空着即可

6.创建路由文件router.js引入小模块文件

// 利用 策略模式 优化 if...else

import comA from "./components/comA.js";
import comB from "./components/comB.js";
import comC from "./components/comC.js";
import comD from "./components/comD.js";

const router = [
    {
        name: "/",
        redirect: "/pageA", // 路由重定向
    },
    {
        name: "/pageA",
        component: comA,
    },
    {
        name: "/pageB",
        component: comB,
    },
    {
        name: "/pageC",
        component: comC,
    },
    {
        name: "/pageD",
        component: comD,
    },
];

export default router;

7.创建JS整合文件index.js

// 引入前端路由
import router from "./router.js";

function fn() {
    const hash = window.location.hash.slice(1) || "/";

    const info = router.find((itme) => itme.name === hash);

    if (info.redirect) {
        window.location.hash = info.redirect;
        return;
    }

    info.component();
}

// 只有页面的 hash 发生变化的时候才会执行
window.onhashchange = fn;

// 页面打开的时候就会执行
fn();