前端路由三种模式原理

19组清风

发布于 2021-11-15 15:08:12

9820

发布于 2021-11-15 15:08:12

文章被收录于专栏：Web Front EndWeb Front End

前端路由三种模式原理

Router-way

github详细介绍路由原理

前端页面三种路由实现方式。

传统路由实现。

window.location.href = 'baidu.com' 跳转。刷新页面。 history.back()回退。

整个页面重新加载，浏览器历史可以显示每一个地址。考虑到安全性但是JS代码中是无法操作的。 2. Hash路由方式。

window.href.href = '#hash' localhost:9000#test。并不刷新页面。

#后跟的就是页面Hash，同样hash的改变也会推进浏览器历史记录中。支持后退前进。

window.onhashchange = function () {
    console.log('current Hash:',window.location.hash)
}
复制代码

H5 Router。

history.pushState(state, title[, url]) 推进路由。增加历史盏中的一条。 history.replaceState(state,title[, url]) 替换路由。在历史记录中替换当前记录。
可以改变网址(存在跨域限制)而不刷新页面，这个强大的特性后来用到了单页面应用如：vue-router，react-router-dom中。
仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面。

状态对象：传给目标路由的信息,可为空
页面标题：目前所有浏览器都不支持,填空字符串即可
可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退
注意:用history.pushState()或者history.replaceState()不会触发popstate事件。

history.state

当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。history.state可以保存当前页面的信息，通过pushState或者replaceState传递onpopstate中改变时候获得（history.state也可以获取）。

history.pushState(state, title, url)
1. state：与要跳转到的URL对应的状态信息。
2. title：不知道干啥用，传空字符串就行了。
3. url：要跳转到的URL地址，不能跨域。

将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。

history.replaceState
1. state：与要跳转到的URL对应的状态信息。
2. title：不知道干啥用，传空字符串就行了。
3. url：要跳转到的URL地址，不能跨域。

用新的state和URL替换当前。不会造成页面刷新。

window.onpopstate

history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

window.onpopstate = function(event) {
  console.log(event.state); // 当前页面相关的history路由信息
  console.log(window.history.state;); // 当前页面相关的history路由信息
  console.log(window.location.hash) // hash路径
  console.log(window.location.pathname) // 绝对路径
  console.log(window.location.href) // 全部路径
};
复制代码

引入Vue中两种路由模式的区别。

Hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){
    // 打印旧的url和新的url
    console.log(event.oldURL, event.newURL);
    // 相当与跳转页面的时候通过hash区别页面以及传递参数
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}
复制代码

上面的代码可以通过改变hash来改变页面字体颜色，虽然没什么用，但是一定程度上说明了原理。

更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。这样一来，浏览器不会发起请求，但是页面状态和url关联了起来，url改变页面可以根据url进行相应逻辑变化。这就是hash路由。

History模式

history api，H5的history api给了前端路由充分的自由。相对于hash路由来讲前端只能控制#后的url地址，而history api允许在同源策略下进行任意的自由路由设置而不刷新页面。
需要额外注意：

history api可以分为两大部分，切换和修改，参考MDN，切换历史状态包括back、forward、go 三个方法，对应浏览器的前进，后退，跳转操作：

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
复制代码

修改历史状态包括了pushState,replaceState

两个方法,这两个方法接收三个参数:stateObj,title,url

history.pushState({color:'red'}, 'red', 'red')
history.back();
setTimeout(function(){
     history.forward();
 },0)
window.onpopstate = function(event){
     console.log(event.state)
     if(event.state && event.state.color === 'red'){
           document.body.style.color = 'red';
      }
}
复制代码