解決Vue 使用vue-router切換頁面時 頁面顯示沒有在頂部的問題
有時候我們需要頁面滾動條滾動到某一固定的位置,一般使用Window scrollTo()
方法。
語法就是:scrollTo(xpos,ypos)
xpos:必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。
ypos:必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。
例如滾動內容的坐標位置100,500:
window.scrollTo(100,500);
解決辦法:
在 Vue項目的main.js文件中加入以下代碼即可解決:
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
})
以上就是針對頁面顯示沒有在頂部的問題的解決辦法,希望對大家有所幫助。
參考: https://blog.csdn.net/wandoumm/article/details/80199191
解決Vue 使用vue-router切換頁面時 頁面顯示沒有在頂部的問題
相關推薦
NestedScrollView內巢狀RecyclerView,開啟頁面時不顯示在頂部的解決方法
由於新需求要求:個人資訊頁面最頂部要增加兩條姓氏全拼,姓名全拼,需求文件如下: 之前佈局用的是NestedScrollView內嵌RecyclerView,RecyclerView位於子佈局的第一個,顯示效果上沒有什麼問題。xml佈局如下: <?xml vers
解決Vue 使用vue-router切換頁面時 頁面顯示沒有在頂部的問題
col https 解決辦法 項目 spa .net style main sdn 有時候我們需要頁面滾動條滾動到某一固定的位置,一般使用Window scrollTo() 方法。 語法就是:scrollTo(xpos,ypos) xpos:必需。要在窗口文檔顯示區左上
每天一點點之vue框架開發 - vue中使用vue-router切換頁面時自動滾動到頂部的方法
1. 在main.js入口檔案中寫入 //路由跳轉後,頁面回到頂部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位
每天一點點之vue框架開發 - vue中使用vue-router切換頁面時自動滾動到頂部的方法
tps base 切換 pre info llb col 技術 scrolltop 1. 在main.js入口文件中寫入 //路由跳轉後,頁面回到頂部 router.afterEach(() => { document.body.scrollTop = 0;
解決vue-router切換路由時沒有自定滾動到頂部
在做vue專案時,發現一個問題,通過vue-router切換頁面時,如果從一個頁面的底部切換到新頁面,新開的頁面初始也會在底部。 使用前端路由,當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新載入頁面那樣。 vue-router 能做到,而且更好,它讓
第4篇:ui-router 切換路由後頁面不回到頂部的解決辦法
在使用ui-router中用$state.go切換路由後,子頁面不會回到頂部而是停留在上一個子頁面對應的位置,若使用在ui-view使用autoscroll="true"的屬性,當路由頂部有導航時並不
解決MyEclipse 編輯或切換到JSP頁面時卡的問題
windows->preferences->General->editors->Files Associations(位置根據具體eclipse版本會有所不同) File Types 選擇.jsp assiciations 裡選擇MyEclipse
NavBar載入頁面時頁面不能操作的問題
今天遇到這樣的問題:一個ViewController,被幾個NavBar頁push。一個頁面的push正常,另外一個頁面push後,就不能用操作,不管點什麼地方都一樣。在xcode裡結束還可能引起xcode的崩潰。一直查不出是什麼總是。一直到下午,偶爾的執行時,彈出一個AlertView(我在p
解決Myeclipse在調試(debug)時無法顯示變量值問題
ont -m mod round con ack style gen 源代碼編譯 解決Myeclipse在調試(debug)時無法顯示變量值問題 突然發現myeclipse在調試時當鼠標放在變量上面時無法顯示變量值了 ct
解決ConstraintLayout 與ScrollView 巢狀時ScrollView 內容沒有完全顯示
ConstraintLayout 佈局中有ScrollView 時,ScrollView 的寬高要設定為0dp 才可以正確的約束佈局 <ScrollView android
教你解決Python資料分析視覺化時可以顯示中文
問題描述: 使用Python進行資料分析時,中文是顯示不了的, 那麼怎麼使matplotlib視覺化是能夠顯示中文呢? 你需要具備的知識:matplotlib基本操作,linux基本操作,IPyt
使用 vue-router 切換頁面時怎麼設定過渡動畫
如何實現切換頁面時的過渡動畫? 背景 今天在編寫頁面時,看到頁面沒有任何效果就只是直入直出,完全沒有一點逼格,所以想要實現類似於原生app的那種切換頁面時的特效,遂開始google,發現網上各種方案都是各有優缺點,於是整理了自認為優雅的方案並記錄下來.
Vue-Vue-router跳轉頁面時返回頂部
pre 創建 brush AC osi next 通過 clas out 第一種方法:main.js router.afterEach((to,from,next) => { window.scrollTo(0,0); }); 第二種方法: 在創
解決使用Vue.js顯示資料的時,頁面閃現原始程式碼
今天開始學習Vue.js的使用,但是在學習過程中發現一個問題,那就是頁面載入資料時,原始程式碼會閃現一下。查訪各方資料,終的解決方法。 第一步、加入一段css程式碼 <style type="text/css">
vue切換頁面時讓滾動軸置頂的相容性寫法
router.afterEach((to, from, next) => {切換頁面時觸發 window.scrollTo(0, 0) 這一行要不要都行 Vue.nextTick(() => { 這是dom渲染完執行 if (documen
Vue中切換頁面時的過渡動畫
定義層級 我們需要給各個頁面定義層級,在切換路由時判斷使用者是進入哪一層頁面,如果使用者進入更高層級那麼做前進動畫,如果使用者退到低層級那麼做後退動畫。 import Vue from 'vue'; import Router from 'vue-router'; import Ho
Vue用router.push(傳參)跳轉頁面,參數改變,跳轉頁面數據不刷新的解決辦法
ren osi pat 出現 響應 router 手機 dep code vue-router同路由$router.push不跳轉一個簡單解決方案 vue-router跳轉一般是這麽寫: goPage(ParentDeptCode2,DeptCode2,hosName,
vue-cli + router生成的專案,當mode為history時,直接在url中輸入地址頁面訪問404,或者重新整理頁面後404
有的時候,業務中會有一些需求,直接在其他地方,比如郵件中提供系統連結,通過點選一個url直接跳轉到我們的系統中來。 在本地開發時,直接輸入對應的url就可以訪問,但是當專案部署在伺服器之後,直接輸入url就會報錯404,這是因為router本身提供的就是一個 虛擬路徑,通過
【vue】切換路由頁面時,中止上個路由頁面未返回資料的請求
背景: 通常情況下,介面返回會比較快,不會出現此類狀況。 但是也有可能是後臺介面也依賴於上游介面,那麼處理過程中可能會有一些延遲之類的問題。 當用戶的某些操作,比如快速切換選單,某些選單一進入頁面後,就會向後臺傳送請求,在請求未拿到資料時,就被使用者切換到下個路
Vue 路由切換時頁面內容沒有重新載入
第二次進入頁面,頁面路由引數已經改變,但是頁面內容不會重新整理。問題原因:在元件mounted鉤子中呼叫的重新整理頁面內容,但測試發現這個鉤子沒有被呼叫。後來發現App.vue中使用了<keep-alive>:<template> <div