history实现前端路由_histtory 模式需要前端指定路由吗-CSDN博客

本文链接：https://blog.csdn.net/qq_34893429/article/details/72999946

本文介绍了一个简单的使用History API实现的前端路由案例。该案例通过监听浏览器的popstate事件来更新页面内容，并通过JavaScript拦截链接点击事件，手动改变浏览器历史记录，从而实现无刷新页面跳转。需要注意的是，在使用History模式时，必须有服务器的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里要注意有一个坑，就是history模式天然是要服务器支持的，也就是说至少也需要起一个服务器。不然“///”这种样式的路径是不会识别的。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<a href="/about">about</a>
<a href="/">home</a>
<a href="/test">test</a>
<a href="/about/test">about_test</a>
<div id="app"></div>
<script type="text/javascript">
function Router(routeOption,id){
        this.routes=routeOption;
        this.currentRoute = '';
        this.dom = id ? document.getElementById(id) : null;
    }
    Router.prototype = {
        init(){
            window.addEventListener('popstate', () => {
              this.currentRoute = window.location.pathname;
              this.routes[this.currentRoute] 
                    ? this.dom ? this.dom.innerText = this.routes[this.currentRoute] : null
                    : null;
            })
        },
        _updateState(route){
             window.history.pushState(
                  null,
                  this.routes[route],
                  route
                )
        },
        route(route){
            this._updateState(route);
        }
    }
    let router = new Router({
          '/': 'Home',
          '/about': 'About',
          '/about/test': 'About_test'
        },'app');

    router.init();
    document.querySelectorAll('a').forEach(function(item,index){
        item.addEventListener('click',function(e){
            e.preventDefault();
            let route = item.getAttribute('href');
            router.route(route);
        })
    })
</script>
</body>
</html>