history和hash实现的原理

最新推荐文章于 2024-10-04 21:00:38 发布

Lcyj9994399

最新推荐文章于 2024-10-04 21:00:38 发布

阅读量59

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Lcyj9994399/article/details/128613927

版权

该文章讲述了如何在前端实现路由管理，通过监听popstate事件和hashchange事件来处理页面导航。当页面加载时，会触发DOMContentLoaded事件，进而主动触发路由变化。通过阻止<a>标签的默认行为，使用history.pushState方法改变URL，并更新页面内容。根据location.pathname或location.hash来渲染不同的UI视图。

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

history

    <ul>
        <!-- 定义路由 -->
        <li><a href="/home">home</a></li>
        <li><a href="/about">about</a></li>
        <!-- 渲染路由对应的 UI -->
        <div id="routeView"></div>
    </ul>

  // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
    window.addEventListener('DOMContentLoaded', onLoad)
    // 监听路由变化
    window.addEventListener('popstate', onPopState)

    // 路由视图
    let routerView = document.querySelector('#routeView')

    function onLoad() {

        onPopState()

        // 拦截 <a> 标签点击事件默认行为， 点击时使用 pushState 修改 URL并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
        let linkList = document.querySelectorAll('a[href]')
        linkList.forEach(el => el.addEventListener('click', function (e) {
            e.preventDefault()
            history.pushState(null, '', el.getAttribute('href'))
            onPopState()
        }))
    }
    // 路由变化时，根据路由渲染对应 UI
    function onPopState() {
        switch (location.pathname) {
            case '/home':
                routerView.innerHTML = 'Home'
                return
            case '/about':
                routerView.innerHTML = 'About'
                return
            default:
                return
        }
    }

hash

 <ul>
        <!-- 定义路由 -->
        <li><a href="#/home">home</a></li>
        <li><a href="#/about">about</a></li>

        <!-- 渲染路由对应的 UI -->
        <div id="routeView"></div>
    </ul>

 // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
        window.addEventListener('DOMContentLoaded', onHashChange)
        // 监听路由变化
        window.addEventListener('hashchange', onHashChange)

        // 路由视图
        let routerView = document.querySelector('#routeView')


        // 路由变化时，根据路由渲染对应 UI
        function onHashChange() {
            switch (location.hash) {
                case '#/home':
                    routerView.innerHTML = 'Home'
                    return
                case '#/about':
                    routerView.innerHTML = 'About'
                    return
                default:
                    return
            }
        }