前端路由的实现方式

前端路由与单页页面

路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。
传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了单页应用。
单页应用，就是只有一个页面，用户访问一个网址，服务器返回的页面始终只有一个，不管用户改变了浏览器地址栏的内容或者在页面内发生了跳转，服务器不会重新返回新的页面，而是通过相应的js操作来实现页面的更改。而地址栏内容的改变，显示不同的页面，实现的手段就是前端路由。

前端路由的实现方式

前端路由主要由两种方式实现：

1. location.hash+hashchange事件
2. history.pushState()+popState事件

hash+hashchange实现

这种方法的好处在于支持IE浏览器。对早期的一些浏览器的支持比较好。
实现原理：
location.hash始终指向页面url 中#之后的内容
当当前页面的url ='www.baidu.com',可以在浏览器的控制台输入location.hash为空，当页面指向url ='www.baidu.com/#/hello'的时候，location.hash = '#/hello'。通过读取location.hash可以知道当前页面所处的位置。通过hashchange事件可以监听location.hash的变化，从而进行相应的处理即可。
那么如何触发hash的改变呢？这里主要由两种方法：

1. 设置a标签，href = '#/blue'，当点击标签的时候，可以在当前url的后面增加上'#/blue'，同时触发hashchange,再回调函数中进行处理。
2. 直接在js中对location.hash = '#/blue'即可，此时url会改变，也会触发hashchange事件。
   下面给出一个通用的hash前端路由的实现方案：

function Router(){

  this.currentUrl='';

  this.routes={};

}

Router.prototype.route = function(path,callback){

  this.routes[path] = callback || function(){}

}

Router.prototype.refresh = function(){

  this.currentUrl = location.hash.slice(1) || '/';

  this.routes[this.currentUrl]();

}

Router.prototype.init = function(){

  window.addEventListener('load',this.refresh.bind(this),false);

  window.addEventListener('hashchange',this.refresh.bind(this),false);

  // console.log(location.hash)

  // if(location.hash.slice(1)!=='/')

  //     location.hash = '#/';

}

上述定义了一个Router对象，在实例中可以这么使用：

var route = new Router();

route.init();

function changecolor(color){

  var body = document.getElementsByTagName('body')[0];

  body.style['background-color'] = color;

}

route.route('/',changecolor.bind(null,'skyblue'));

route.route('/blue',changecolor.bind(null,'blue'));

route.route('/green',changecolor.bind(null,'green'));

route.route('/color',function(){

  var p= document.getElementsByTagName('a');

  [].forEach.call(p,function(item){item.style['color'] = '#'+((~~(Math.random()*(1<<24))).toString(16));})

});

新建一个Router的实例，进行初始化，然后进行url与callback的绑定，就可以在hash发生改变的时候出发触发相应的callback。这种方式支持浏览器的前进与后退。很好的解决了前后端分离之后的问题。这种方式有一个缺点就是#的存在，让一些人看了觉得不是很舒服，所以html给history新增了一些api，从而以一种更优雅的方式实现前端路由。

 

history.pushState()+popstate 实现

1.history基本介绍

window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法：

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相同
• history.go(n) - 接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面
• 如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

在HTML5，history对象提出了 pushState() 方法和 replaceState() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了，现在的前端路由也是基于这个原理实现的。

2.history.pushState

pushState(stateObj, title, url) 方法向历史栈中写入数据，其第一个参数是要写入的数据对象（不大于640kB)，第二个参数是页面的 title, 第三个参数是 url (相对路径)。

• stateObj ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
• title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
• url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

关于pushState，有几个值得注意的地方：

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应,只有当触发前进后退等事件（back()和forward()等）时浏览器才会刷新

这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户，所以当违背同源策略时将会报错

3.history.replaceState

replaceState(stateObj, title, url) 和pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其余和 pushState一模一样

4.popstate事件

定义：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

注意：仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用Javascript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

用法：使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象（即这两个方法的第一个参数）。

一个demo,便于理解。其中url的链接均采用了#/打头，主要是如果是相对路径，服务器端会直接跳转到对应的网页，如果想要实现不用#,?等，需要在服务器端进行处理，不论用户访问的相对url是什么，都会返回最初的那个页面。

1.24更新：此处url直接采用相对路径，可以实现前进后退，问题出在刷新上，当用户刷新，此时，如果服务器端不做处理，会显示没有页面，服务器端只需要输出原本的那个页面就可以完美解决问题。

(function(){

    var div1 = document.getElementById('div1');

    var a1 = document.getElementById('a1');

    var a2 = document.getElementById('a2');

    var count1 = 0;

  var count2 = 0;

  history.replaceState({count1:count1,count2:count2},null,'');//最开始的状态，采用replace直接替换

    a1.addEventListener('click',function(){

    count1++;

        history.pushState({count1:count1,count2:count2},null,'#/s'+count1);//之后的状态，需要进行保存

        a1.innerHTML = 's'+count1;

    })

    a2.addEventListener('click',function(){

    count2++;

        history.pushState({count1:count1,count2:count2},null,'#/k'+count2);//之后的状态，需要进行保存

        a2.innerHTML = 'k'+count2;

    })

    window.addEventListener('popstate',function(e){

    console.log(e.state);

    a1.innerHTML = 's'+e.state.count1;//监听popstate事件，对状态进行还原

      a2.innerHTML = 'k'+e.state.count2;

    })

})()

采用了立即执行函数来避免污染全局变量，其中点击一下a1,a2元素，均会进行pushState操作，在进行前进后退的时候，就会触发popstate事件，通过在该事件中对元素进行还原，优雅的解决了单页应用前进后退问题。
演示页面见：demo

两种模式比较

1. pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL

1. pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
2. pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
3. pushState可额外设置title属性供后续使用

 

history模式的一个问题

我们知道对于单页应用来讲，理想的使用场景是仅在进入应用时加载index.html，后续在的网络操作通过Ajax完成，不会根据URL重新请求页面，但是难免遇到特殊情况，比如用户直接在地址栏中输入并回车，浏览器重启重新加载应用等。
hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的：

http://oursite.com/#/user/id // 如重新请求只会发送http://oursite.com/

故在hash模式下遇到根据URL请求页面的情况不会有问题。

而history模式则会将URL修改得就和正常请求后端的URL一样

http://oursite.com/user/id

在此情况下重新向后端发送请求，如后端没有配置对应/user/id的路由处理，则会返回404错误。

官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。