欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年05月31日 08:34:03   作者:fuqihan  
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

當前版本: 3.0.3

類目錄: src/history/base.js

hash模式

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

history模式

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

HTML5History實現(xiàn)

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

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

handleScroll

<!-- 等待頁面渲染完才進行滾動的操作 -->
 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進行初始化的操作 -->
 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模式下的一個比較關(guān)鍵的方法,他使用pushState來進行跳轉(zhuǎn)操作,然后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實現(xiàn)

對于HashHistory的實現(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ù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • Vue3之狀態(tài)管理器(Pinia)詳解及使用方式

    Vue3之狀態(tài)管理器(Pinia)詳解及使用方式

    這篇文章主要介紹了Vue3之狀態(tài)管理器(Pinia)詳解及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue-loader中引入模板預(yù)處理器的實現(xiàn)

    vue-loader中引入模板預(yù)處理器的實現(xiàn)

    這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • vue使用vite配置跨域以及環(huán)境配置詳解

    vue使用vite配置跨域以及環(huán)境配置詳解

    跨域是指當一個資源去訪問另一個不同域名或者同域名不同端口的資源時,就會發(fā)出跨域請求,下面這篇文章主要給大家介紹了關(guān)于vue使用vite配置跨域以及環(huán)境配置的相關(guān)資料,需要的朋友可以參考下
    2022-07-07
  • vue中子組件如何間接修改父組件傳遞過來的值問題

    vue中子組件如何間接修改父組件傳遞過來的值問題

    這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過來的值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue vee-validate插件的簡單使用

    Vue vee-validate插件的簡單使用

    這個插件可以用來在未使用組件庫,沒有自帶好的校驗規(guī)則時使用,進行表單校驗,非常的實用,感興趣的朋友可以參考下本文,了解該插件的使用方法
    2021-06-06
  • vue3實現(xiàn)在新標簽中打開指定網(wǎng)址的方法

    vue3實現(xiàn)在新標簽中打開指定網(wǎng)址的方法

    我希望點擊查看按鈕的時候,能夠在新的標簽頁面打開這個文件的地址進行預(yù)覽,該如何實現(xiàn)呢,下面小編給大家?guī)砹嘶趘ue3實現(xiàn)在新標簽中打開指定的網(wǎng)址,感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • vue實現(xiàn)動態(tài)按鈕功能

    vue實現(xiàn)動態(tài)按鈕功能

    這篇文章主要介紹了vue實現(xiàn)動態(tài)按鈕功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • vue3中虛擬dom的介紹與使用詳解

    vue3中虛擬dom的介紹與使用詳解

    Vue?是如何將一份模板轉(zhuǎn)換為真實的?DOM?節(jié)點的,又是如何高效地更新這些節(jié)點的呢,這些都離不開虛擬dom這個概念,下面我們就來了解下虛擬dom這個概念以及它是什么吧
    2024-01-01
  • vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決

    vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決

    這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • webpack搭建vue 項目的步驟

    webpack搭建vue 項目的步驟

    這篇文章主要介紹了webpack搭建vue 項目的步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論