かかってこいよ NakamuraEmi
  1. 1 かかってこいよ NakamuraEmi
  2. 2 One Last You Jen Bird
  3. 3 Last Surprise Lyn
  4. 4 Life Will Change Lyn
  5. 5 The Night We Stood Lyn
  6. 6 Time Bomb Veela
  7. 7 Warcry mpi
  8. 8 Quiet Storm Lyn
  9. 9 Hypocrite Nush
  10. 10 Flower Of Life 发热巫女
  11. 11 Libertus Chen-U
2017-06-01 22:48:26

前端路由控制

在web开发中不可避免的会接触到路由的概念,例如Vue配套的技术栈里就有vue-router来管理前端路由的控制。那么路由究竟是什么呢?


路由的定义

路由简单来说就是url到函数的映射。当访问不同的url时,通过函数映射表查询相应函数并执行。目前的web应用路由分为后端路由和前端路由。

后端路由

这也是传统的服务器端渲染应用的常用路由形式。当接受到来自客户端的HTTP请求时,根据请求的URL和请求方法查找到相应的映射函数并执行,然后将返回值发送给客户端。

对于静态资源服务器,映射函数就是简单的文件读取操作。对于动态资源服务器,映射函数就可能会进行和数据库相关的操作了。

前端路由

前端路由是目前单页应用常用的路由形式。实际上我们只渲染一张HTML页面,根据路由的映射函数控制DOM的显隐,进而达到显示页面不同组件的效果。目前前端路由有两种实现方案,一是基于location.hash传统形式。二是基于HTML5的API——History。

location.hash

在过去,url中的#最根本的用途是跳转到页面的某一个锚点,浏览器读取到这个锚点后会滚动到可视位置。指定锚点的方法有以下两种:

  1. a标签的name属性。
  2. id属性。

由此可见,url中#后的部分本意是用于页面内的定位,所以http请求中#后的部分都会被忽略,即不同的#值不会触发网页的重载,但是#的改变会改变浏览器的访问历史,基于该特性,我们就可以通过hash的改变自定义函数来实现DOM控制,从而实现前端路由了。简单实现如下:

let hash = window.location.hash;
switch(hash) {
  case '#one':
    show('one');
    break;
  case '#two':
    show('two');
    break;
    ...
}

过去一般通过定时器监听hash变化,HTML5中新增了hashchange事件,通过监听该事件我们可以更方便实现基于hash的路由。

window.addEventListener('hashchange', function(){
  if (window.location.hash === '#one') {
    ...
  }
}, false)

另外谷歌针对ajax内容进行了seo优化。 如果希望ajax内容被读取,url中使用#!后,后面的内容将会转成查询字符串_escaped_fragment_的值。

HTML5 History API

相关方法

在HTML5中新增了一个history对象用来操作浏览历史记录,这个对象使用栈结构保存url历史数据。控制浏览器当前所处历史位置的方法如下:

  • back()

移动到上一个位置,等于浏览器的后退键。

  • froward()

移动到下一个位置,等于浏览器的前进键。

  • go(number)

接受一个相对当前位置的整数作为参数,移动到指定页面。当参数为0时相当于刷新页面。

修改url历史数据的方法如下:

  • pushState(state, title, url)

该方法向栈末尾添加一个新记录并在url栏立刻显示,但不会重载页面。state参数为相关状态对象,popstate事件触发时会传入回调函数。title参数为新页面的标题。url参数为新的路径,必须与当前页面同域。

  • replaceState(state, title, url)

和pushState相同,区别在于修改栈末尾的记录。

popState事件

当文档的浏览历史发生变化时就会触发该事件,通过pushState和replaceState方法修改不触发。该事件的回调函数接受一个event对象,这个对象的state属性即为之前提供的state对象。这个state对象也可以通过history.state读取。通过监听该方法即可实现前端路由了,实例如下:

window.onpopstate = function() {
  let path = window.location.pathname;
  switch(path) {
    case 'one':
      showOne();
      break;
    case 'two':
      showTwo();
      break;
      ...
  }
}

小结

总的来说,基于hash的前端路由兼容性更好。基于history的前端路由更正式,url也会更好看。在具体业务中根据实际情况选择。

-- EOF --

添加在分类「 前端开发 」下,并被添加 「HTML」 标签。