vue切換頁面(路由)時如何保持滾動條回到頂部

更新時間：2022年12月06日 14:16:55 作者：牛先森家的牛奶

這篇文章主要介紹了vue 切換頁面(路由)時如何保持滾動條回到頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue切換“頁面”(路由)時保持滾動條回到頂部

vue項目做pc端的時候，發(fā)現(xiàn)在兩個頁面切換時滾動條沒有回到頂部而是保持原先的位置；

這是由于vue是單頁面應(yīng)用，只是更換了路由內(nèi)容，還在當(dāng)前頁面滾動條是不會回到頂部的。

解決辦法是在切換路由的時候，將滾動區(qū)域的滾動條復(fù)位為0。

? // 使用 watch 監(jiān)聽$router的變化,
? watch: {
? ? '$route': function(to, from) {
　? ? document.body.scrollTop = 0
? ? ? document.documentElement.scrollTop = 0
? ? }
? }

當(dāng)然看頁面的布局，可能滾動區(qū)域并不是document的scrollTop為0 能有效果，和項目里面的布局滾動區(qū)域有關(guān)，下面是項目里面的滾動區(qū)域 app-main ；

<template>
? <div id="app">
? ? <router-view />
? ? <!-- 骨架屏，在菜單組件觸發(fā)隱藏，目前沒想到又好的方式處理 -->
? ? <common-skeleton v-if="showSkeleton" />
? </div>
</template>

<script>
import CommonSkeleton from './components/Skeleton/common'

export default {
? name: 'App',
? components: {
? ? CommonSkeleton
? },
? computed: {
? ? showSkeleton() {
? ? ? return this.$store.state.settings.showSkeleton
? ? }
? },
? watch: {
? ? '$route'(val) {
? ? ? if (!document.getElementsByClassName('app-main') || !document.getElementsByClassName('app-main').length) {
? ? ? ? return
? ? ? }
? ? ? document.getElementsByClassName('app-main')[0].scrollTop = 0
? ? }
? }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
#app {
? width: 100%;
? height: 100%;
? @include clearfix;
}
</style>

vue頁面跳轉(zhuǎn)后，滾動條不在頂部的解決

問題描述

vue在將頁面滾動到頁面中部或者底部（反正不在頂部），再進(jìn)行頁面跳轉(zhuǎn)后，新頁面的滾動條還處于上一個頁面的位置，并沒有更新到頁面頂部

解決方法

在全局路由鉤子里面將頁面滾動到頁面頂部

router.beforeEach((to, from, next) => {
? ? document.body.scrollTop = 0;
? ? document.documentElement.scrollTop = 0;
?
? ? // 兼容IE
? ? window.scrollTo(0, 0);
? ? next();
})

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在Vue3項目中關(guān)閉ESLint的完整步驟
實際上在學(xué)習(xí)過程中,你會發(fā)現(xiàn)eslint檢查特別討厭,這個時候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下
2023-11-11
vue 解決路由只變化參數(shù)頁面組件不更新問題
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁面組件不更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能示例
這篇文章主要介紹了vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能,結(jié)合實例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
淺析對Vue中keep-alive緩存組件的理解
<keep-alive> 是一個抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時,其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下
2024-01-01
Vue數(shù)據(jù)驅(qū)動試圖的實現(xiàn)方法及原理
當(dāng)Vue實例中的數(shù)據(jù)（data）發(fā)生變化時,與之相關(guān)聯(lián)的視圖（template）會自動更新,反映出最新的數(shù)據(jù)狀態(tài), Vue的數(shù)據(jù)驅(qū)動視圖是通過其響應(yīng)式系統(tǒng)實現(xiàn)的,以下是Vue數(shù)據(jù)驅(qū)動視圖實現(xiàn)的核心原理,需要的朋友可以參考下
2024-10-10
關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問題
這篇文章主要介紹了關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
使用Vue.js創(chuàng)建一個時間跟蹤的單頁應(yīng)用
這篇文章主要介紹了使用Vue.js創(chuàng)建一個時間跟蹤的單頁應(yīng)用的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2016-11-11
vue中的Object.freeze()?優(yōu)化數(shù)據(jù)方式
這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3使用深度選擇器修改樣式問題
這篇文章主要介紹了vue3使用深度選擇器修改樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue項目中跨域問題解決方案
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧
2018-06-06