vue-router中hash模式和history模式详解
- 更新时间:2020-03-24 16:47:07
- 编辑:茹朋兴
当前版本: 3.0.3
类目录: src/history/base.js
hash模式
即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL: http://www.abc.com/#/hello ,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history模式
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
HTML5History实现
使用window.addEventListener('popstate')监听浏览器滚动行为,然后判断配置是否有scrollBehavior, 有就调用handleScroll方法来处理
滚动行为: 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
handleScroll
<!-- 等待页面渲染完才进行滚动的操作 --> router.app.$nextTick(() => { <!-- 初始化数据 --> const position = getScrollPosition() const shouldScroll = behavior.call(router, to, from, isPop ? position : null) if (!shouldScroll) { return } <!-- 判断是否是Promise,官网说支持异步 --> if (typeof shouldScroll.then === 'function') { shouldScroll.then(shouldScroll => { scrollToPosition((shouldScroll: any), position) }).catch(err => { if (process.env.NODE_ENV !== 'production') { assert(false, err.toString()) } }) } else { scrollToPosition(shouldScroll, position) } })
scrollToPosition
function scrollToPosition (shouldScroll, position) { const isObject = typeof shouldScroll === 'object' <!-- 对position进行初始化的操作 --> if (isObject && typeof shouldScroll.selector === 'string') { const el = document.querySelector(shouldScroll.selector) if (el) { let offset = shouldScroll.offset && typeof shouldScroll.offset === 'object' ? shouldScroll.offset : {} offset = normalizeOffset(offset) position = getElementPosition(el, offset) } else if (isValidPosition(shouldScroll)) { position = normalizePosition(shouldScroll) } } else if (isObject && isValidPosition(shouldScroll)) { position = normalizePosition(shouldScroll) } 使用window.scrollTo来进行滚动处理 if (position) { window.scrollTo(position.x, position.y) } }
push
push操作也是 HTML5History模式下的一个比较关键的方法,他使用pushState来进行跳转操作,然后handleScroll来进行滚动\
export function pushState (url?: string, replace?: boolean) { <!-- 保存当前页面的滚动位置 --> saveScrollPosition() // try...catch the pushState call to get around Safari // DOM Exception 18 where it limits to 100 pushState calls const history = window.history try { <!-- 判断是哪种操作动作 --> if (replace) { history.replaceState({ key: _key }, '', url) } else { _key = genKey() history.pushState({ key: _key }, '', url) } } catch (e) { window.location[replace ? 'replace' : 'assign'](url) } }
HashHistory实现
对于HashHistory的实现,和HTML5History的区别是在于Listener的方式和跳转的方式
Listener的方式这里是使用了hashchange,但是如果需要滚动行为就会去监听popstate
window.addEventListener(supportsPushState ? 'popstate' : 'hashchange')
跳转的方式会判断是否需要滚动,不需要就直接使用window.location.hash
function pushHash (path) { if (supportsPushState) { pushState(getUrl(path)) } else { window.location.hash = path } }
总结
以上所述是小编给大家介绍的vue-router之hash模式和history模式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关教程
-
vue状态管理模式vuex知识点总结
本篇文章主要介绍了深入理解vue的状态管理模式vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2019-10-19
-
详解vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
这篇文章主要介绍了vue项目中使用AES实现密码加密解密的方法,主要是通过ecb和cbc两种模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
发布时间:2020-02-17
-
水晶石技法VUE 10完全学习手册
《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见
大小:114191 MB VUE10学习手册
-
Vue.js项目实战
Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英
大小:141 MBVue
-
前端工程师必备技能:Vue移动开发实战技巧
Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201
大小:122 MBVue实战电子书
-
Vue.js实战
尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅
大小:196.7 MBVue电子书
-
Vue.js前端开发:快速入门与专业应用
本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的
大小:3.6KB MB前端开发电子书
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。
大小:186.6 MBWeb前端电子书
-
Spring Boot+Vue全栈开发实战
传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序
大小:196.3 MBSpring电子书
-
Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统
本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现
大小:132979 MB 项目实战
-
Vue企业开发实战
本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。
大小:109.6 MBVue.js实战电子书