vue切換頁面(路由)時如何保持滾動條回到頂部
更新時間：2022年12月06日 14:16:55 作者：牛先森家的牛奶
這篇文章主要介紹了vue 切換頁面(路由)時如何保持滾動條回到頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue切換“頁面”(路由)時保持滾動條回到頂部
vue項目做pc端的時候，發(fā)現(xiàn)在兩個頁面切換時 滾動條沒有回到頂部而是保持原先的位置；
這是由于vue是單頁面應用，只是更換了路由內容，還在當前頁面滾動條是不會回到頂部的。
解決辦法是在切換路由的時候，將滾動區(qū)域的滾動條復位為0。
? // 使用 watch 監(jiān)聽$router的變化,
? watch: {
? ? '$route': function(to, from) {
? ? document.body.scrollTop = 0
? ? ? document.documentElement.scrollTop = 0
? ? }
? }當然看頁面的布局，可能滾動區(qū)域并不是document的scrollTop為0 能有效果，和項目里面的布局滾動區(qū)域有關，下面是項目里面的滾動區(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頁面跳轉后，滾動條不在頂部的解決
問題描述
vue在將頁面滾動到頁面中部或者底部（反正不在頂部），再進行頁面跳轉后，新頁面的滾動條還處于上一個頁面的位置，并沒有更新到頁面頂部
解決方法
在全局路由鉤子里面將頁面滾動到頁面頂部
router.beforeEach((to, from, next) => {
? ? document.body.scrollTop = 0;
? ? document.documentElement.scrollTop = 0;
?
? ? // 兼容IE
? ? window.scrollTo(0, 0);
? ? next();
})以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
實際上在學習過程中,你會發(fā)現(xiàn)eslint檢查特別討厭,這個時候我們需要關閉掉eslint檢查,下面這篇文章主要給大家介紹了關于在Vue3項目中關閉ESLint的完整步驟,需要的朋友可以參考下2023-11-11
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁面組件不更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能示例
這篇文章主要介紹了vue+elementUI實現(xiàn)表單和圖片上傳及驗證功能,結合實例形式分析了vue+elementUI表單相關操作技巧,需要的朋友可以參考下2019-05-05
<keep-alive> 是一個抽象組件,用于將其內部的組件保留在內存中,而不會重新渲染,這意味著當組件在<keep-alive> 內部切換時,其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
當Vue實例中的數(shù)據（data）發(fā)生變化時,與之相關聯(lián)的視圖（template）會自動更新,反映出最新的數(shù)據狀態(tài), Vue的數(shù)據驅動視圖是通過其響應式系統(tǒng)實現(xiàn)的,以下是Vue數(shù)據驅動視圖實現(xiàn)的核心原理,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了關于antd-vue?a-menu菜單綁定路由的相關問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了使用Vue.js創(chuàng)建一個時間跟蹤的單頁應用的相關資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
vue中的Object.freeze()?優(yōu)化數(shù)據方式
這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數(shù)據方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3使用深度選擇器修改樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內容詳情大家跟隨腳本之家小編一起學習吧2018-06-06