前端路由
文章图片
为什么要有前端路由
- 传统的多页面形式
刚开始,我们要实现路由的跳转都是依靠后端路由实现的。每一个页面都是一个单独的html文件,用户进行页面切换的时候,浏览器发送不同的url请求,服务器接收到以后把该url对应的html文件返回给我们。浏览器拿到之后就开始解析,显示。
缺点:
- 每一次跳转都需要去向后端请求完整的html页面,重新加载。
- 加大服务器的压力
- SPA
随着ajax(浏览器实现异步加载的一种技术方案)的出现,单页面模式逐渐代替了传统模式。通俗一点解释,就是我们现在只有一个html文件。多个页面的切换实际上是视图的切换。SPA是通过JS来修改html内容。其自身的url是没有改变的。单页应用不仅在页面交互是无刷新的,连页面跳转都是无刷新的,为了配合实现单页面应用跳转,前端路由孕育而生。
缺点:
- 对于前进后退等操作,不能达到想要的效果,因为页面的Url并没有改变
- SPA 中虽然由于业务的不同会有多种页面展示形式,但只有一个 url,对 SEO 不友好,不方便搜索引擎进行收录。
- 前端路由的诞生
- 总结一下前端路由需要解决的问题:
保证只要一个HTML页面,页面在不完全刷新的情况下切换视图,为SPA中的每一个视图匹配一个特殊的url,通过这个url来进行刷新,前进,后退以及SEO等操作。也就是说url变了,但是并没有重新加载。 - 总结一下实现的关键:
- 改变url且不发送请求
- 监听到url的变化
缺点:由于服务器没有保留完整的 HTML,通过 js 进行动态 DOM 拼接,需要耗费额外的时间,不如服务端渲染速度快。
- 总结一下前端路由需要解决的问题:
其实路由简单来说,就是我们url和我们视图的一个映射,这个映射是单向的,通过监听到url的变化,来改变我们的视图。
前端路由主要有两种方式:
1. Hash
- 什么是hash
后面的heading-0就是我们的锚,也就是hash。hash也叫锚点,主要用于页面定位。与hash值对应的dom id的页面会出现在可视区。
(一个完整的 URL 包括:协议、域名、端口、虚拟目录、文件名、参数、锚。)
- hash值更新的特点
- hash值更新,会改变url,但是http请求的时候不包含锚定位,所以对后端无影响。
- 因为不包含锚定位,所以hash值改变的时候,不会触发页面的重新加载。
- hash值的更改,会改变浏览器的历史记录,并且可以通过window.onhashchange()事件监听我们的hash变换。
这满足我们上面的实现关键的两个。所以我们是通过改变hash值来进行页面的跳转的。那我们应该怎么去改变呢?
改变url的hash值的三种方式:
- a标签跳转
- 设置window.location.hash
- 浏览器前进键(history.forword())、后退键(history.back())
【深入前端路由】总结:这三种改变hash值的方式,会改变我们的url,并且会改变浏览器的历史记录,可以通过window.onhashchange()事件监听。但是因为http请求不会带hash值,所以对后端无影响,也不会触发页面的重新加载。所以 hash 模式路由就是利用 hashchange 事件监听 URL 的变化,从而进行 DOM 操作来模拟页面跳转。
2. History
- 在 HTML5 之前,浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转,后面由于SPA的广泛应用,HTML5提供了两个新的API。 history.pushState() 和 history.replaceState()
- 由于 history.pushState() 和 history.replaceState() 可以改变 url 同时,不会刷新页面,所以在 HTML5 中的 histroy 具备了实现前端路由的能力。
- hash的兼容性更好,可以兼容到IE8
hash的缺点: - 形式比较丑
- 相同 hash 值不会触发动作将记录加入到历史栈中,而 pushState 则可以
1. router对象类型
- vue 把 VueRouter作为一个对象
- React 把router作为一个组件。
react-router 的注入方式是在组件树顶层放一个 Router 组件,然后在组件树中散落着很多 Route 组件,顶层的 Router 组件负责分析监听 URL 的变化,在其下面的 Route 组件渲染对应的组件。在完整的单页面项目中,使用 Router 组件将根组件包裹,就能完成保证正常的路由跳转。
2. 基础组件
- Vue-router
组件的渲染 直接跳转
Rect-router-dom (react-router-dom在react-router的基础上扩展了可操作dom的api。)、 区分选择的路由方式。history还是hash - 点击跳转,和
类似, 和 类似,组件的渲染。 - 用来将 react-router 由包容性路由转换为排他性路由,每次只要匹配成功就不会继续向下匹配。vue-router 属于排他性路由。
vue-router和react-router-dom都有两种路由模式,history和hash。但是在实现和使用上有些许区别。不过底层都是依靠浏览器的自有特性。
Vue-router:
- 两种模式在实例化Vue-router的时候通过配置路由选项mode来决定。
- hash模式
首先判断浏览器是否支持pushState,如果支持,就通过pushState来改变hash值。popstate 监听浏览器操作,完成导航功能。如果不支持,通过设置window.location.hash,hashchange 监听 URL 变化完成路由导航。 - History模式
地址栏 URL 中没有 #。与 Hash 模式实现导航的思路是一样的。不同的是,vue-router 提供了 fallback 配置,当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
- 实现依赖 history.js,history.js 是 JavaScript 库。
、分别基于 history.js 的 BrowserHistory 类、HashHistory 类实现。 - Hash模式
- HashHistory 类直接通过 location.hash、location.replace 和 hashchange 实现,没有优先使用 history 新特性的处理。
- History模式
- BrowserHistory 类通过 pushState、replaceState 和 popstate 实现,但并没有类似 vue-router 的兼容处理
https://jelly.jd.com/article/...