手写简单history

最新推荐文章于 2022-10-29 22:17:55 发布

取个昵称要人命

最新推荐文章于 2022-10-29 22:17:55 发布

阅读量148

点赞数

分类专栏：自我学习文章标签： js nodejs

本文链接：https://blog.csdn.net/weixin_42564514/article/details/104838967

版权

自我学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

手写简单history

主要方法，通过history.pushState({},'',path)实现

1.demo结构

2.app.js

const http = require('http')
const fs = require('fs')
http.createServer((req,res)=>{
    fs.readFile('./index.html',(err,data)=>{
        res.end(data)
    })
}).listen(9001,()=>{
    console.log('9001 启动成功')
})

3.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="user" onclick="toUrl('/user')">用户</button>
    <button id="cart" onclick="toUrl('/cart')">购物车</button>
    <span id="showTxt">

    </span>
</body>
</html>
<script>
    function toUrl(path)
    {
        let txt
        switch(path){
            case '/user': 
                txt = '用户页面';
                history.pushState({},'',path);
                break;
            case '/cart': 
                txt = '购物车页面';
                history.pushState({},'',path);
                break;
        }
        document.getElementById('showTxt').innerText=txt
    }
    window.onload = ()=>{
        window.addEventListener('popState',()=>{
            alert(111)
        })

        let path = location.pathname
        let txt
        switch(path){
            case '/user': 
                txt = '用户页面';
                history.pushState({},'',path);
                break;
            case '/cart': 
                txt = '购物车页面';
                history.pushState({},'',path);
                break;
        }
        document.getElementById('showTxt').innerText=txt
    }
</script>

4.运行截图

取个昵称要人命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写简单history

手写简单history主要方法，通过history.pushState({},'',path)实现1.demo结构2.app.jsconst http = require('http')const fs = require('fs')http.createServer((req,res)=&g...
复制链接

扫一扫