前提：

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括嘉峪關(guān)網(wǎng)站建設(shè)、嘉峪關(guān)網(wǎng)站制作、嘉峪關(guān)網(wǎng)頁制作以及嘉峪關(guān)網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，嘉峪關(guān)網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到嘉峪關(guān)省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

之前寫過關(guān)于keep-Alive組件，來實(shí)現(xiàn)在列表頁進(jìn)入詳情頁后，后退，返回列表，顯示上次訪問的位置（原理就是緩存列表頁數(shù)據(jù)來實(shí)現(xiàn)），目前發(fā)現(xiàn)另外一個(gè)問題，就是如果后臺(tái)操作改變數(shù)據(jù)的狀態(tài)，緩存的辦法就會(huì)導(dǎo)致數(shù)據(jù)更新不及時(shí)導(dǎo)致一些頁面錯(cuò)誤（例如：商品疑問，在后臺(tái)答復(fù)之后，不可以修改內(nèi)容，前臺(tái)更新不及時(shí)就會(huì)導(dǎo)致，前臺(tái)顯示可編輯，但實(shí)際狀態(tài)是不可編輯了），所以又繼續(xù)研究另外一種解決辦法，scrollBehavior 來實(shí)現(xiàn)。

簡介：

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

注意: 這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。

官方文檔簡介： 滾動(dòng)行為

使用方法：

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
 // return 期望滾動(dòng)到哪個(gè)的位置
 }
})

或者集成模式寫法：

utils.js

export function scrollBehavior (to, from, savedPosition) {
 // return 期望滾動(dòng)到哪個(gè)的位置
}

index.js

import Vue from 'vue'
import Router from 'vue-router'
import { scrollBehavior } from './utils'
Vue.use(Router)
const router = new Router({
 mode: 'history',
 scrollBehavior,
 routes: [
 ...routesPC,
 ...routesMO
 ]
})
export default router

scrollBehavior 方法接收 to 和 from 路由對象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。

在該方法內(nèi)，可以通過判斷路由to,from兩個(gè)對象來做一些必要的判斷；

savedPosition 參數(shù)是記錄的上次滾動(dòng)的位置；

通過return {x:number,y:number}來控制頁面滾動(dòng)的位置；

對于所有路由導(dǎo)航，簡單地讓頁面滾動(dòng)到頂部。

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

想要在后退時(shí)，滾動(dòng)到上次滾動(dòng)的位置，如果滿足條件，savedPosition有值的情況下：

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
 return savedPosition
 } else {
 return { x: 0, y: 0 }
 }
}

新增情況：異步滾動(dòng)

當(dāng)頁面數(shù)據(jù)需要請求加載有延遲的情況下，頁面如果直接滾動(dòng)，會(huì)出現(xiàn)滾動(dòng)后，頁面數(shù)據(jù)請求回來，DOM重新渲染，滾動(dòng)失效的情況；

所以官方文檔給補(bǔ)充了異步滾動(dòng)的方法：

scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve({ x: 0, y: 0 })
  }, 500)
 })
}

這個(gè)會(huì)在返回后，有一定延遲再滾動(dòng)，可以根據(jù)自己項(xiàng)目的具體情況進(jìn)行一定修改，兼容；

注：我的項(xiàng)目mobile端數(shù)據(jù)加載使用的是vue-mugen-scroll滑動(dòng)加載數(shù)據(jù)組件，網(wǎng)上沒找到能觸發(fā)它加載的方法，所以，在返回列表頁后，數(shù)據(jù)刷新，只有一頁數(shù)據(jù)，滾動(dòng)到底，也找不到上次的數(shù)據(jù)，嗚嗚嗚......所以還是沒有解決我的問題，但是這個(gè)方法是很好的，只是使用情況，會(huì)有限制，記錄一下，以備后用。

總結(jié)

以上所述是小編給大家介紹的Vue scrollBehavior 滾動(dòng)行為實(shí)現(xiàn)后退頁面顯示在上次瀏覽的位置,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

網(wǎng)站名稱：VuescrollBehavior滾動(dòng)行為實(shí)現(xiàn)后退頁面顯示在上次瀏覽的位置
文章鏈接：http://vcdvsql.cn/article36/jhgpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站改版、外貿(mào)建站、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、云服務(wù)器

廣告

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