一文了解vue-router之hash模式和history模式

前端  /  管理员 发布于 5年前   357

当前版本: 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  }    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'  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-router 中hash模式和history模式的区别
• vue-router中的hash和history两种模式的区别
• vue-router history模式下的微信分享小结
• vue vue-Router默认hash模式修改为history需要做的修改详解
• Vue-Router模式和钩子的用法
• vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
• vue-router启用history模式下的开发及非根目录部署方法
• vue-router的HTML5 History 模式设置
• 浅谈vue项目4rs vue-router上线后history模式遇到的坑
• vue-router的两种模式的区别
• vue-router两种模式区别及使用注意事项详解