當(dāng)前版本: 3.0.3

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),碌曲企業(yè)網(wǎng)站建設(shè),碌曲品牌網(wǎng)站建設(shè),網(wǎng)站定制,碌曲網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,碌曲網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

類目錄: src/history/base.js

hash模式

即地址欄 URL 中的 # 符號（此 hash 不是密碼學(xué)里的散列運(yùn)算）。比如這個 URL： http://www.abc.com/#/hello ，hash 的值為 #/hello。它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。

history模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時，雖然改變了當(dāng)前的 URL，但瀏覽器不會立即向后端發(fā)送請求。

HTML5History實(shí)現(xiàn)

使用window.addEventListener('popstate')監(jiān)聽瀏覽器滾動行為，然后判斷配置是否有scrollBehavior， 有就調(diào)用handleScroll方法來處理

滾動行為: 使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。

handleScroll

<!-- 等待頁面渲染完才進(jìn)行滾動的操作 -->
 router.app.$nextTick(() => {
   <!-- 初始化數(shù)據(jù) -->
  const position = getScrollPosition()
  const shouldScroll = behavior.call(router, to, from, isPop ? position : null)

  if (!shouldScroll) {
   return
  }
  <!-- 判斷是否是Promise,官網(wǎng)說支持異步 -->
  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進(jìn)行初始化的操作 -->
 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來進(jìn)行滾動處理
 if (position) {
  window.scrollTo(position.x, position.y)
 }
}

push

push操作也是 HTML5History模式下的一個比較關(guān)鍵的方法，他使用pushState來進(jìn)行跳轉(zhuǎn)操作，然后handleScroll來進(jìn)行滾動\

export function pushState (url?: string, replace?: boolean) {
  <!-- 保存當(dāng)前頁面的滾動位置 -->
 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實(shí)現(xiàn)

對于HashHistory的實(shí)現(xiàn)，和HTML5History的區(qū)別是在于Listener的方式和跳轉(zhuǎn)的方式

Listener的方式這里是使用了hashchange，但是如果需要滾動行為就會去監(jiān)聽popstate

window.addEventListener(supportsPushState ? 'popstate' : 'hashchange')

跳轉(zhuǎn)的方式會判斷是否需要滾動，不需要就直接使用window.location.hash

function pushHash (path) {
 if (supportsPushState) {
  pushState(getUrl(path))
 } else {
  window.location.hash = path
 }
}

總結(jié)

以上所述是小編給大家介紹的vue-router之hash模式和history模式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

網(wǎng)頁題目：一文了解vue-router之hash模式和history模式
標(biāo)題路徑：http://chinadenli.net/article26/jigejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計、、品牌網(wǎng)站建設(shè)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)