前端路由路由机制

前端路由机制

前言
前端路由机制
前端路由机制原理及两种实现方式

一、History
二、hashChange
三、hash 和 history API对比

前言

早起的路由都是由后端提供，请求服务器通过url来reload页面。但是随着页面越来越多，服务器的压力也越来越大。
而就目前最流行的SPA单页面应用架构路由则是由前端实现。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。它的实现原理就是利用前端路由机制。

前端路由机制

前端路由，顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。

前端路由机制原理及两种实现方式

一、History

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
用户访问网页的历史记录通常会被保存在一个类似于栈对象中，即history对象：

history 对象包含用户（在浏览器窗口）访问过的url
history对象是window对象的一部分，可以通过window.history属性进行访问。

基本的API用法如back、forward、go不做多解释，可以参考MDN
重点解释html5新增的API：
1、history.pushState（） //在history对象中添加一条新的浏览记录
2、History.replaceState() // 是替换history中的当前记录
3、history.state //是一个属性，可以得到当前页的state信息。
4、window.onpopstate //是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。

和它相似的一个方法叫做onhashchange，onhashchange是老API, 浏览器支持度高, 本来是用来监
听hash变化的, 但可以被利用来做客户端前进和后退事件的监听，onpopstate是专门用来监听浏览器
前进后退的, 不仅可以支持hash, 非hash的同源url也支持。

history.pushState与History.replaceState的区别
history.pushState和History.replaceState都接收三个参数：即（data[,title][,url]）

状态对象（state Object）：一个object，与pushState方法创建的新历史记录条目关联。
标题：一般传null
地址（url）：新的历史记录条目的地址。

pushState和replaceState都会操作浏览器的历史记录，并且不会引起页面的刷新。
不同之处在与：一个新增，一个替换。
在这里插入图片描述

<div class="wrap">
        <h3>前端路由实现测试</h3>
        <ul class="list">
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
        </ul>
        <div class="content"></div>
    </div>
<script>
   window.onload =function(){
       // 全局监听popstate 当点击前进后退的时候回触发
        window.onpopstate = function(event){
            console.log('POPstate' + event)
        }
        // 监听hashchange事件
        window.onhashchange = function(event){
            console.log('hashChange:' + event)
        }
        // 点击按钮改变state
        document.querySelector('.list').addEventListener('click',function(event){
            if(event.target.nodeName == 'LI') {
                console.log(event.target.innerHTML)
                var content = event.target.innerHTML;
                var _newState
                _newState ={
                    url: location.origin + '/' +content,
                    title: document.title,
                    state: content
                };
                // 调用pushState方法跳转
                window.history.replaceState(_newState,'','/' + content);
                document.querySelector('.content').innerHTML= '路由切换为：'+content
            }
        })
    }
</script>

在这里插入图片描述

二、hashChange

我们经常看到在url中出现#符号，这个在路由中出现的#，叫做hash，很多大型框架的路由系统都是由hash实现的。
上面提到一个方法onhashchange事件，用来监听hash变化，也可以被利用来做客户端前进和后退事件的监听。
在这里插入图片描述

<div class="wrap">
   <h3>前端路由实现测试</h3>
    <ul class="list">
        <li><a href="#one">第1个</a></li>
        <li><a href="#two">第2个</a></li>
        <li><a href="#three">第3个</a></li>
    </ul>
    <div class="content"></div>
</div>
<script>
  window.onload =function(){
	    // 全局监听popstate 当点击前进后退的时候回触发
	     window.onpopstate = function(event){
	         console.log('POPstate' + event)
	     }
	
	     // 监听hashchange事件
	     window.onhashchange = function(event){
	         console.log('哈希值变化' + location.hash)
	     }
	 }
</script>

在这里插入图片描述

三、hash 和 history API对比

在这里插入图片描述