Router-way

github详细介绍路由原理

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

传统路由实现。

window.location.href = 'baidu.com' 跳转。刷新页面。 history.back()回退。整个页面重新加载，浏览器历史可以显示每一个地址。考虑到安全性但是JS代码中是无法操作的。

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';
      }
}

history模式配置问题

vue-router官方文档：不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 oursite.com/user/id 就会返回 404，这就不好看了。

github详细介绍路由原理以及配置原理
让我们来告诉后台what to do！

Vue对比两种模式

已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？

首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。最重要的一点：
如果不想要很丑的 hash，我们可以用路由的 history 模式 —— 引用自 vueRouter文档

前端路由三种模式原理