实现单页面应用的路由（初级）

明乐er

已于 2022-02-16 09:54:06 修改

阅读量306

点赞数

分类专栏： HTML 文章标签： css css3 html

于 2022-02-16 09:47:32 首次发布

原创栏目不可以用于商业盈利，其他皆可使用

本文链接：https://blog.csdn.net/qq_35021522/article/details/122956836

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

# 目录结构
test
├─ css
│  └─ reset.css
├─ index.html
├─ js
│  ├─ index.js
└─ pages
   ├─ page1.js
   ├─ page2.js
   ├─ page3.js
   ├─ page4.js
   └─ page5.js

// reset.css
body,
ul {
    margin: 0;
}

a {
    text-decoration: none;
    color: #169db4;
}

li {
    list-style: none;
}

ul {
    padding-left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
}

html,
body {
    height: 100%;
}

body {
    font: 14px/1.42876 "微软雅黑";
}

// 主要的js
import page1 from '/pages/page1.js';
import page2 from '/pages/page2.js';
import page3 from '/pages/page3.js';
import page4 from '/pages/page4.js';
import page5 from '/pages/page5.js';

window.addEventListener('load', function (event) {
    const liTags = document.querySelectorAll('.menu-list>li');
    for (let i = 0; i < liTags.length; i++) {
        liTags[i].addEventListener('click', function (e) {
            for (let j = 0; j < liTags.length; j++) {
                liTags[j].removeAttribute('class');
            }
            if (e.target.children.length) {
                e.target.children[0].click();
                e.target.setAttribute('class', 'active');
            }
        }, false);
    }
    liTags[0].click();
    loadPage(window.location.hash);
}, false)

window.addEventListener('hashchange', function (e) {
    loadPage(e.currentTarget.location.hash);
}, false);

function loadPage(hash) {
    let pageTag = document.querySelector('#page');
    let content = '';
    switch (hash) {
        case '#page1':
            content = page1;
            break;
        case '#page2':
            content = page2;
            break;
        case '#page3':
            content = page3;
            break;
        case '#page4':
            content = page4;
            break;
        case '#page5':
            content = page5;
            break;
        default:
            content = page1;
    }
    pageTag.setAttribute('current-menu', hash);
    pageTag.innerHTML = content;
    document.title = hash;
}

<!-- 子页面 page1-page5页面的内容都是这样 -->
export default `
<section id="section1">
    <header>
        <h3>标题1</h3>
    </header>
    <main></main>
</section>
`

<!-- 路由页面（入口） -->
<!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>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        nav {
            height: 45px;
        }

        .menu-list {
            height: 100%;
        }

        .menu-list li {
            display: inline-flex;
            align-items: center;
            height: 100%;
            padding-left: 10px;
            padding-right: 10px;
            cursor: pointer;
        }

        .menu-list li:hover,
        .menu-list li.active {
            background-color: cyan;
        }

        .menu-list li a {
            pointer-events: none;
        }

        .page {
            height: calc(100% - 45px);
            background-color: gainsboro;
            overflow: auto;
        }

        section main {
            height: 500px;
        }

        #section1 main {
            background-color: yellowgreen;
        }

        #section2 main {
            background-color: cornflowerblue;
        }

        #section3 main {
            background-color: greenyellow;
        }

        #section4 main {
            background-color: goldenrod;
        }

        #section5 main {
            background-color: lightblue;
        }
    </style>
    <!-- <script type="module" src="./js/init.js" async></script> -->
    <script type="module" src="./js/index.js" async defer></script>
</head>

<body>
    <nav>
        <ul class="menu-list">
            <li><a href="#page1">页面1</a></li>
            <li><a href="#page2">页面2</a></li>
            <li><a href="#page3">页面3</a></li>
            <li><a href="#page4">页面4</a></li>
            <li><a href="#page5">页面5</a></li>
        </ul>
    </nav>
    <article class="page" id="page"></article>
</body>

</html>

明乐er

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现单页面应用的路由（初级）

// reset.cssbody,ul { margin: 0;}a { text-decoration: none; color: #169db4;}li { list-style: none;}ul { padding-left: 0;}h1,h2,h3,h4,h5,h6 { margin-top: 0; margin-bottom: 0;}html,body { height: 100%;}
复制链接

扫一扫

专栏目录