前端路由

栏目: Html5 · 发布时间: 5年前

内容简介:在网络原理中,路由指的是分组从源到目的地时,决定端到端路径的网络范围的进程,做成硬件叫路由器,在路由器中维护着一个路由表,并根据此路由表决定下一跳的地址。在 web 中,一样的原理,是指根据不同的 url 给其分配不同的控制器(处理程序)。在最初的 web 开发中,我们并不太关注到路由,这和当时的开发方式有关,是后端模板的渲染方式,我们常看到的 jsp,php 都是这种方案,由后端根据请求信息来决定显示什么样的页面,此时路由是在服务端配置的。这时候的路由就是 url 和后端服务器的交互,根据不同的路径显示

在网络原理中,路由指的是分组从源到目的地时,决定端到端路径的网络范围的进程,做成硬件叫路由器,在路由器中维护着一个路由表,并根据此路由表决定下一跳的地址。在 web 中,一样的原理,是指根据不同的 url 给其分配不同的控制器(处理程序)。

前端路由的出现

在最初的 web 开发中,我们并不太关注到路由,这和当时的开发方式有关,是后端模板的渲染方式,我们常看到的 jsp,php 都是这种方案,由后端根据请求信息来决定显示什么样的页面,此时路由是在服务端配置的。这时候的路由就是 url 和后端服务器的交互,根据不同的路径显示不同的资源,页面也是一种资源。这种开发方式有明显的不足,每切换一个页面都要重新加载一次,即使两个页面有很多相同的地方。还有就是前后端的代码揉杂在一起,前端要部署一个既有前端代码又有后端代码的项目,不方便本地开发调试,一旦后端代码有错误,前端无法进行开发,前端被限制在后端的开发方式中,效率很低,前端迫切的需要一种革新来改变这种开发方式。

随着前后端分离和 MVVM 概念的兴起及前端工程化的发展,出现了一种新的开发方式,SPA 单页应用,前端圈迅速崛起,有了爆发式的发展。单页应用的意思是只有一个页面,是无刷新的,看到的页面之间的跳转其实只是组件的切换,同时 URL 也要相应的变化,为了实现这种单页应用,出现了前端路由。

前端路由到底是什么

那么前端路由到底是什么?用一句话说就是 URL 和组件树的映射关系。因为单页应用前端整个工程实际上只有一个页面,不同的 url 只是在切换不同的组件,实际上就是监听 url 的变化然后按照他的规则来进行匹配。

前端路由的实现

前端路由的实现方式主要有两种:

  • hash
  • history

1、hash 即 window.loacation.hash,url 中以“#”为标识符,如:www.xxx/com/list.ht… ,这个值可读可写,读取时,可以用来判断网页状态,写入时会在不重新载入网页的情况下给浏览器增加一条历史记录,有了这种特性就有了前端路由的雏形,因为改变#之后的内容相当于改变了 url,但是并没有重新向服务器发送请求。JavaScript 可以通过 window.onhashchange 来监听 url 变化,以实现不同组件的切换。

目前主要的路由库有 vue-router,react-router,他们的主要功能是存储路由的 hash 以及对应的函数,然后监听 hash 的变化执行对应的函数。以 vue-router 为例,看一下他的监听源码:

setupListeners () {  //设置监听器
  const router = this.router
  const expectScroll = router.options.scrollBehavior
  const supportsScroll = supportsPushState && expectScroll

  if (supportsScroll) {
    setupScroll()
  }

  window.addEventListener(supportsPushState ? 'popstate' : 'hashchange', () => {
    const current = this.current
    if (!ensureSlash()) {
      return
    }
    this.transitionTo(getHash(), route => {
      if (supportsScroll) {
        handleScroll(this.router, route, current, true)
      }
      if (!supportsPushState) {   // hash变化改变view
        replaceHash(route.fullPath)
      }
    })
  })
}
复制代码

这里他把 hashchange 是作为降级方案处理的,因为有更优的处理方式,下面会讲。这里只是设置监听的代码,当然他的前后还有一些“钩子”,即跳转前,跳转后要执行的方法,甚至有可能取消此次跳转。

2、由于 html5 的发布,引入了 history.pushState()history.replaceState() 方法,它们分别可以添加和修改历史记录条目。pushState 需要三个参数,一个状态对象(可以通过 onpopstate 事件获取到),一个标题 (目前被忽略)和一个 URL,replaceState 参数也是一样。通常与 window.onpopstate 配合使用,这个为前端路由的另一种模式奠定了基础,但是这种方式的 url 是一个完整的如 http://www.xxx.com/list/complete ,他每一次改变都会向服务发送一次请求资源(其实我们是没有这个页面地址的),所以需要服务器端增加一条配置,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是我们的主页面。

下面我们用此种方法做一个简版的路由,开发思想涉及到了观察者模式,都是考虑最简单的情况。

前端路由
前端路由
前端路由

以上所述就是小编给大家介绍的《前端路由》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Beginning Java Objects中文版从概念到代码

Beginning Java Objects中文版从概念到代码

巴克 / 万波 / 人民邮电出版社 / 2007-1 / 78.00元

《Beginning Java Objects中文版从概念到代码(第2版)》是关于软件对象和Java的,但并不是纯粹地介绍Java语言,而是强调如何从对象模型转换到功能完整的Java应用程序。书中讲述了对象基础、对象建模和模型的实现。《Beginning Java Objects中文版从概念到代码(第2版)》除了用学生注册系统(SRS)示例贯穿全书之外,还在附录中给出三个附加的案例,这些案例是每章......一起来看看 《Beginning Java Objects中文版从概念到代码》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器