vue vue-router 完美實現前進重新整理,後退不重新整理。附scrollBehavior原始碼解析
需求:在一個vue的專案中,我們需要從一個列表頁面點選列表中的某一個詳情頁面,從詳情頁面返回不重新整理列表,而從列表的上一個頁面重新進入列表頁面則需要重新整理列表。
而瀏覽器的機制則是每一次的頁面開啟都會重新執行所有的程式,所以這個功能並不能直接實現。而vue-router給我們提供了一個叫scrollBehavior的回撥函式,我門可以用這個方法結合keep-alive能很好的實現這個功能,下面第一步附上實現程式碼:
首先我們建立a,b,c,d四個頁面,在路由的meta屬性中新增需要快取的頁面標識(isKeepAlive):
import Vue from 'vue' import Router from 'vue-router' const HelloWorld = () => import('@/components/HelloWorld') const A = () => import('@/components/router-return/router-a') const B = () => import('@/components/router-return/router-b') const C = () => import('@/components/router-return/router-c') const D = () => import('@/components/router-return/router-d') Vue.use(Router) const routes = [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/a', name: 'A', component: A }, { path: '/b', name: 'B', component: B, meta: { isKeepAlive: true } }, { path: '/c', name: 'C', component: C }, { path: '/d', name: 'D', component: D } ]
然後我們修改app.vue頁面:
<template> <div id="app"> <img src="./assets/logo.png"> <keep-alive> <router-view v-if="$route.meta.isKeepAlive"/> </keep-alive> <router-view v-if="!$route.meta.isKeepAlive"/> </div> </template>
最後我們新增new Router方法的scrollBehavior
export default new Router({ routes, scrollBehavior (to, from, savedPosition) { // 從第二頁返回首頁時savedPosition為undefined if (savedPosition || typeof savedPosition === 'undefined') { // 只處理設定了路由元資訊的元件 from.meta.isKeepAlive = typeof from.meta.isKeepAlive === 'undefined' ? undefined : false to.meta.isKeepAlive = typeof to.meta.isKeepAlive === 'undefined' ? undefined : true if (savedPosition) { return savedPosition } } else { from.meta.isKeepAlive = typeof from.meta.isKeepAlive === 'undefined' ? undefined : true to.meta.isKeepAlive = typeof to.meta.isKeepAlive === 'undefined' ? undefined : false } } })
在scrollBehavior方法中的savedPosition引數,每一次點選進去的值為null,而點選瀏覽器的前進與後退則會返回上一次該頁面離開時候的pageXOffset與pageYOffset的值,然後我們可以根據這個返回的值來修改路由資訊裡面的isKeepAlive值來控制是否顯示快取。
我們來看下vue-router裡面scrollBehavior執行的原始碼:
在vue-router.js的1547行發現:
function handleScroll ( router, to, from, isPop) { if (!router.app) { return } var behavior = router.options.scrollBehavior; if (!behavior) { return } { assert(typeof behavior === 'function', "scrollBehavior must be a function"); } // wait until re-render finishes before scrolling router.app.$nextTick(function () { // 得到該頁面之前的position值,如果沒有快取則返回null var position = getScrollPosition(); var shouldScroll = behavior(to, from, isPop ? position : null); if (!shouldScroll) { return } if (typeof shouldScroll.then === 'function') { shouldScroll.then(function (shouldScroll) { // 移動頁面到指定位置 scrollToPosition((shouldScroll), position); }).catch(function (err) { { assert(false, err.toString()); } }); } else { // 移動頁面到指定位置 scrollToPosition(shouldScroll, position); } }); }
再看下上面方法中用到的幾個主要方法的寫法:
// getScrollPosition 得到移動的座標 function getScrollPosition () { var key = getStateKey(); if (key) { return positionStore[key] } } // scrollToPosition 頁面移動方法 function scrollToPosition (shouldScroll, position) { var isObject = typeof shouldScroll === 'object'; if (isObject && typeof shouldScroll.selector === 'string') { var el = document.querySelector(shouldScroll.selector); if (el) { var 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); } if (position) { window.scrollTo(position.x, position.y); } }
然後我們看看vue-router是怎麼快取頁面x,y的座標的,上面的getScrollPosition是用來獲取座標的,那麼肯定也有儲存座標的方法,在getScrollPosition的上面一個方法則是saveScrollPosition就是儲存的方法:
// saveScrollPosition function saveScrollPosition () { var key = getStateKey(); if (key) { positionStore[key] = { x: window.pageXOffset, y: window.pageYOffset }; } }
而這個儲存的方法會有一個key值是快取的標識,繼續查詢getStateKey:
根據上面程式碼發現key值就是一個時間值。而setStateKey則是一個key值更新的方法,然後繼續查詢setStateKey執行的地方:
function setupScroll () { // Fix for #1585 for Firefox window.history.replaceState({ key: getStateKey() }, ''); window.addEventListener('popstate', function (e) { saveScrollPosition(); if (e.state && e.state.key) { setStateKey(e.state.key); } }); }
然後發現該方法執行的地方是popState執行的時候,而key的來源則是popState返回引數裡面的state屬性裡面,而state值的設定則是pushstate執行的時候傳進去的,所以我們繼續查pushstate執行的方法:
function pushState (url, replace) { saveScrollPosition(); // try...catch the pushState call to get around Safari // DOM Exception 18 where it limits to 100 pushState calls var 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); } }
根據上面程式碼發現,每次push的時候都會去生成一個當前時間的key值儲存在state裡面,作用於popstate時使用。
那麼到此scrollBehavior方法的整個執行邏輯就清楚了:該方法最主要的是運用了瀏覽器的popstate方法只會在瀏覽器回退與前進才會執行的機制,在頁面進入時生成一個唯一的key值儲存在state裡面,離開的時候將頁面滾動位置儲存在state裡面的唯一key值上。每次pushstate的時候key值都是最新的,沒有快取所以返回null,而執行popstate的時候state裡面的key都有快取,則返回上次離開時候的滾動座標。
相關推薦
vue vue-router 完美實現前進重新整理,後退不重新整理。附scrollBehavior原始碼解析
需求:在一個vue的專案中,我們需要從一個列表頁面點選列表中的某一個詳情頁面,從詳情頁面返回不重新整理列表,而從列表的上一個頁面重新進入列表頁面則需要重新整理列表。 而瀏覽器的機制則是每一次的頁面開啟都會重新執行所有的程式,所以這個功能並不能直接實現。而vue-rout
Vue 實現前進重新整理,後退不重新整理的效果 玩轉vue-router裡的meta
Vue 實現前進重新整理,後退不重新整理的效果 玩轉vue-router裡的meta。 需求一: 在一個列表頁中,第一次進入的時候,請求獲取資料。 點選某個列表項,跳到詳情頁,再從詳情頁後退回到列表頁時,不重新整理。 也就是說從其他頁面進到列表頁,需要重新整理獲取資料,從詳情頁返回到列表頁時不要重新整理
玩轉vue前進重新整理,後退不重新整理and按需重新整理
大白蘿蔔小課堂開講了!帶你玩轉vue前進後退按需重新整理! 用vue做後臺管理專案,特別是有列表頁、列表資料詳情頁、列表資料修改頁功能的碼友們,幾乎都被vue前進後退都重新整理的邏輯坑過,本蘿蔔更是! 蘿蔔的產品經理老先生(人稱老白,送外賣的進來都叫老先生)的要求是 : 1.列
vue實現前進重新整理後退不重新整理效果
最近在用vue嘗試著做移動端的專案。希望實現前進重新整理、後退不重新整理的效果。即載入過的介面能快取起來(返回不用重新載入),關閉的介面能被銷燬掉(再進入時重新載入)。例如對a->b->c 前進(b,c)重新整理,c->b->a 後退(b,a)不重新整理。 由於 keep
vue 路由引數變化,頁面不重新整理,provide /inject 完美解決方案
此方法使用的是v-if來控制router-view的顯示或隱藏,v-if從false變為true時,vue會重新渲染router-view區域,所以當引數變化時,只需讓v-if 從true => false => false,就能實現頁面重新整理;
vue-router中關於元件複用頁面不重新整理的問題
業務描述: 當前頁面是一個帶引數的頁面,如下: 頁面下方有tab,點選其一個的跳轉路由是: 由此,發現問題,地址改變了,但是頁面資料沒有重新整理。 查閱後,此情況屬於元件複用的情況。 解決方法: 通過watch監聽路由變化: watch: { '
vue單頁應用前進重新整理後退不重新整理方案探討
引言 前端webapp應用為了追求類似於native模式的細緻體驗,總是在不斷的在向native的體驗靠攏;比如本文即將要說到的功能,native由於是多頁應用,新頁面可以啟用一個的新的webview來開啟,後退其實是關閉當前webview,其上一個webview就自然顯示出來;但是在單頁的webapp應用中
vue前進重新整理後退不重新整理
問題描述:一個頁面只有第一次進入會獲取資料,之後就不會獲取資料(不會發起網路請求) 我們發現只有第一次進入頁面時才會請求資料,這就有一個問題,如果是詳情頁面,這樣詳情的內容就不會重新整理,點選不同的商品詳情都是同一個,每次需要手動重新整理才能,這真的體驗很不好 主要原因設定了keep-
vue專案如何使頁面後退不重新整理,且還原滾動條位置
新指令化管理滾動狀態地址https://blog.csdn.net/theoneEmperor/article/details/82669022(歡迎star),滾動條儲存以及回退只需要一條指令,讓你為所欲為。
vue-cli3使用 DllPlugin 實現預編譯,提升構建速度
ons 進行 closed brush highlight 忽略 pts con pla 在項目打包上有兩個目標:減少打包代碼體積和加快打包速度 1. 減少打包體積: (1)對於用的比較少的庫,可以去掉(我去掉了jquery以及lodash),用到的地方,參考源碼自己寫 (
【JS】:JS實現頁面的重新整理,後退和前進
通過history.go()完成 history.go(-1); 後退 history.go(0); 重新整理 history.go(1); 前進
[轉] 2017-11-20 發布 另辟蹊徑:vue單頁面,多路由,前進刷新,後退不刷新
word 根據 class con 原因 無奈 子函數 設置變量 des 目的:vue-cli構建的vue單頁面應用,某些特定的頁面,實現前進刷新,後退不刷新,類似app般的用戶體驗。註: 此處的刷新特指當進入此頁面時,觸發ajax請求,向服務器獲取數據。不刷新特指當進
vue單頁應用前進刷新後退不刷新方案探討
nested 規則 meta route 獲取 事先 ejs 啟用 ive 引言 前端webapp應用為了追求類似於native模式的細致體驗,總是在不斷的在向native的體驗靠攏;比如本文即將要說到的功能,native由於是多頁應用,新頁面可以啟用一個的新的webvie
vue 物件陣列的值更改後,資料不更新的解決辦法
this.$set(this.list[index], 'show', value) 注意: 這樣賦值需要在第一次更改(除宣告外)this.list[index].show的時候就用$set,若是之前就直接賦值,後面再用$set不會生效。
用指令管理vue滾動狀態以及滾動條復原,讓你為所欲為。
滾動狀態管理以及滾動條復原是困擾了我很久的問題,想必也有和我有同樣感受的同學,比如首頁跳詳情頁,以及各詳情頁滾動條的管理,讓人感覺很難受,那麼如何來簡化它呢?那麼就使用這款神奇的外掛vue-rescroll吧,讓你瘋狂飆車,為所欲為。 &
vue安裝環境過程出現的問題,以及解決方法。
安裝完一次npm,下載了小demo後,過一段時間再去用vue忘記環境已經安裝好,再次安裝時,由於npm安裝時下載不全,一直在報錯,試用了很多方法,cmd 指令安裝vue-cli一直報錯,最後我還是選擇在原來demo 下修改,之前報Error: Cannot find mod
利用ajax和JSP技術實現網頁中表單的區域性重新整理(只重新整理表單資料,而不重新整理整個頁面)
在web開發中有時有區域性重新整理的需求,這樣做的好處是克服了頁面整體重新整理對網路速度受限的情況。 1.MySQL資料表如下(簡單舉例): 表名:stu_info stuId int PK NN
CSS實現背景透明,文字不透明,兼容所有瀏覽器
set rgba 技術 打開 fit itl 默認 head copy 於是呢,熬夜加班做了11.11的活動,在PC端遇到了透明背景和透明圖片的問題,其實以前也遇到過,只是沒有總結起來,就忘記了,這次又撞墻了,必須記錄下來,一來給自己做個小總結,提個醒,最近變懶了,再不努力
線上選課案例—通過js實現全選,全不選和多選效果。順便談談理解的半吊子flag這個變數
要點: 1.首先分為兩個業務邏輯的模組,首先 全選/取消全選 的按鈕會的選中的狀態或者沒有選中,他的返回值是Boolean型別,也就是說通過通過這個通過全選按鈕將其Boolean型別的值,通過迴圈賦值給全選框下面所有的單選按鈕 2.再單選按鈕執行之前,將所有的單選按鈕狀態做一次判斷,判斷是否
css實現背景透明,內容不透明
css實現背景和文字均為黑色,背景透明度為0.2,文字不透明: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-e