前端js实现路由切换页面 pushState replaceState

可缺不可滥

已于 2022-02-17 17:45:25 修改

阅读量4.2k

点赞数 5

分类专栏：前端逻辑基础文章标签： javascript route popstate pushState replaceState

于 2022-02-16 19:05:58 首次发布

本文链接：https://blog.csdn.net/glorydx/article/details/122969486

版权

前端逻辑基础专栏收录该内容

42 篇文章 6 订阅

订阅专栏

window.history

我们可以通过window.history的两个方法来控制浏览器的路由改变，但不会让浏览器刷新页面。

pushState

会追加浏览器的路由历史，但不会刷新页面，可以用这种方式来实现前端路由的控制。

history.pushState(state, title[, url])

可以传递三个参数，state，
需要传递的参数，当监听到浏览器的路由活动历史记录条目更改时，可以获取到这个参数。
title 当前大多数浏览器都忽略此参数，在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为要移动的状态传递简短的标题。
url 在当前host之后新增的路由地址，

// 如果当前的域名是 www.baidu.com
const state = { name: 'dx', age: 18 }
const title = ''
const url = '/about'

const result = history.pushState(state, title, url)
// 路由将会改变为www.baidu.com/about

replaceState

history.replaceState(stateObj, title[, url]);

和pushState的用法一致，不同的是，它会改变当前路由，不会追加浏览器路由的历史记录，同样也不会刷新页面

popstate

当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。

但是，调用replaceState或者pushState不会触发popstate的监听。
replaceState和pushState是创建popstate监听的条件，通过replaceState和pushState设置state对象，而当浏览器通过其它方式（比如 history.back()或者history.forward()方法）跳转到对应的url时，可以通过popstate监听函数的参数，拿到被设置的state对象。

window.addEventListener('popstate', function (e) {
    console.log(e.state)
},false)

const state1 = { name: 'dx', age: 18 }
const title = ''
const url = '/about'

history.pushState(state1, title, url)

history.back()
// 先后退到之前的路由，会打印一次state,但此时的路由没有通过pushState或者replaceState设置state,所以
// null
history.forward()
// 再次回到about路由时，又会打印一次state
// { name: 'dx', age: 18 }

虽然pushState和 replaceState改变路由时不能被popState监听到，但其它方式只要改变了浏览器路由，都会触发popState的监听，如果监听的路由恰好被pushState和replaceState设置过state，我们都能通过上面的方式拿到state。

改变了浏览器路由的方式有哪些？
浏览器自带的前进或后退按钮，history.back(), history.forward() history.go(-1) history.go(1)等

location.hash

这将会在当前url最后添加#xxx，同样不会刷新当前网页

// 如果当前url是 www.baidu.com
location.hash="home" 
// www.baidu.com/#/home

// 用hashchange监听路由hash的变化，
window.addEventListener('hashchange', function (e) {
    console.log(e)
},false)

在这里插入图片描述

浏览器的路径改变了，但不刷新页面，这就能让前端来切换路由，替换页面，实现类似vue router或者react router的功能。

我们可以监听到路由的变化，并且，我们能够实现路由变化而不刷新页面，这就是实现前端路由切换页面的前提。

<!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>
</head>

<body>
    <div>
        <span onclick="handleHome()">首页</span> <span onclick="handleAbout">关于我们</span> <span>博客</span>
    </div>
    <div id="app-router-content">
    </div>
</body>

</html>

<script type="text/javascript">
    var routeConfig = [
        {
            path: '/about',
            component: '这是关于我们页面的展示内容'
        },
        {
            path: '/home',
            component: '这是首页的展示内容'
        },
        {
            path: '/404',
            component: '当前页面不存在'
        }
    ]

    var router = {
        push: function (url) {
            history.pushState({ path: url }, null, url);

            const result = routeConfig.find((routeItem) => {
                return routeItem.path === 'url'
            })

            if (result) {
                const contentBox = document.querySelector('#app-router-content')
                contentBox.innerHTML = result.component
            } else {
                router.replace('/404')
            }
        },
        replace: function (url) {
            history.replaceState({ path: url }, null, url);

            const result = routeConfig.find((routeItem) => {
                return routeItem.path === 'url'
            })

            if (result) {
                const contentBox = document.querySelector('#app-router-content')
                contentBox.innerHTML = result.component
            } else {
                router.replace('/404')
            }
        }
    }

    window.addEventListener('popstate', function (e) {
        if (e.state) {
            const path = e.state?.path
            if (path) {
                router.replace(path)
            } else {
                router.replace('/404')
            }
        }
    }, false)

    var handleHome = function () {
        router.push('/home')
    }

    var handleAbout = function () {
        router.replace('/about')
    }
</script>