写一个前端路由

2017-10-11

1.什么是前端路由

传统的页面路由是放在后端来做的，访问不同的URL，跳转到不同的页面。但在单页应用中，数据的替换都是使用ajax来进行的。通过切换页面来使用不同的功能更为符合用户习惯，为了模拟这种行为，我们需要让url的变换和数据替换同时触发。

现在让前端来维护这个路由路径和决定url与之相对应数据，这便是前端路由。

2.history

得益于HTML5的发展，DOM提供了一个history对象，可以让我们访问、添加和修改浏览器的历史记录。

  • 访问:

//向后移动历史记录
window.history.back();
//向前移动历史记录
window.history.forward();
//跳转到history中指定的点，x=0:代表当前位置；x=-1:向后移动一个页面；x=1:向前移动一个页面
window.history.go(x);
//获取历史堆栈中页面的数量
window.history.length
  • 添加:

var state1 = { title: "hello title" };
history.pushState(state1, "new page1", "new1.html");

向当前页添加一个名为new1.html的历史记录，它的状态值为state1对象，标题为new page1。

  • 修改:

var state2 = { title: "hello title" };
history.replaceState(state2, "new page2", "new2.html");

将当前位置的历史记录替换为new2.html，它的状态值为state2对象，标题为new page2。用法和pushstate一样，区别在于该操作不会将当前页面存储在历史记录里。

3.实现

接下来实现一个菜单页，点击菜单选项，用pushState模拟跳转页面，点击前进或后退会触发popstate事件，所以我们可以监听它来进行数据的替换。首页使用replaceState来替换当前url，所以可以看到，例子里虽然访问的是:

https://link-router.herokuapp.com

但是它跳转到的是

https://link-router.herokuapp.com/?area=asia

却没有添加历史记录，所以浏览器返回按钮不可用。

代码在这里

4.history对比hash实现

优点:
1.得到的url更符合后端路由的形式，hash形式会多一个#
2.可以模拟跨浏览器同源策略的url形式

缺点:
1.回退或前进后不能回到刚才的位置，hash可以
2.需要服务端的配合才能有更好的体验，否则直接访问没有的文件路径，会直接返回404，而hash使用的是锚点，即使不存在也不会出现显性的错误提示。
3.对IE8以下的浏览器没有支持

← 返回