Vue3 setup 頁面跳轉監聽路由變化調整頁面訪問位置

頁面跳轉后頁面還是停留在上一個頁面的位置,沒有回到頂部

解決

1、router中路由守衛中統一添加

router.beforeEach(async (to, from, next) => {window.scrollTo(0, 0);next();
});

2、頁面中監聽頁面變化

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();watch(() => route.path,(path) => {console.log('path', path);window.scrollTo({ top: 0, behavior: 'smooth' });}
);</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/214187.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/214187.shtml
英文地址,請注明出處:http://en.pswp.cn/news/214187.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

@Autowired 找不到Bean的問題

排查思路 檢查包掃描&#xff1a;查詢的Bean是否被spring掃描裝配到檢查該Bean上是否配上注解&#xff08;Service/Component/Repository…&#xff09;如果使用第三方&#xff0c;檢查相關依賴是否已經安裝到當前項目 Autowired和Resource的區別 Autowired 是spring提供的注…

圖像清晰度 和像素、分辨率、鏡頭的關系

關于圖像清晰度的幾個知識點分享。 知識點 清晰度 清晰度指影像上各細部影紋及其邊界的清晰程度。清晰度&#xff0c;一般是從錄像機角度出發&#xff0c;通過看重放圖像的清晰程度來比較圖像質量&#xff0c;所以常用清晰度一詞。 而攝像機一般使用分解力一詞來衡量它“分解被…

linux通過命令切換用戶

在Linux中&#xff0c;你可以使用su&#xff08;substitute user或switch user&#xff09;命令來切換用戶。這個命令允許你臨時或永久地以另一個用戶的身份運行命令。以下是基本的用法&#xff1a; 基本切換到另一個用戶&#xff08;需要密碼&#xff09;&#xff1a;su [用戶…

APIFox:打造高效便捷的API管理工具

隨著互聯網技術的不斷發展&#xff0c;API&#xff08;應用程序接口&#xff09;已經成為了企業間數據交互的重要方式。然而&#xff0c;API的管理和維護卻成為了開發者們面臨的一大挑戰。為了解決這一問題&#xff0c;APIFox應運而生&#xff0c;它是一款專為API管理而生的工具…

【力扣100】189.輪轉數組

添加鏈接描述 class Solution:def rotate(self, nums: List[int], k: int) -> None:"""Do not return anything, modify nums in-place instead."""# 思路&#xff1a;三次數組翻轉nlen(nums)kk%nnums[:] nums[-k:] nums[:-k]思路就是&…

數據科學實踐:探索數據驅動的決策

寫在前面 你是否曾經困擾于如何從海量的數據中提取有價值的信息?你是否想過如何利用數據來指導你的決策,讓你的決策更加科學和精確?如果你有這樣的困擾和疑問,那么你來對了地方。這篇文章將引導你走進數據科學的世界,探索數據驅動的決策。 1.數據科學的基本原則 在我們…

第四屆傳智杯初賽(蓮子的機械動力學)

題目描述 題目背景的問題可以轉化為如下描述&#xff1a; 給定兩個長度分別為 n,m 的整數 a,b&#xff0c;計算它們的和。 但是要注意的是&#xff0c;這里的 a,b 采用了某種特殊的進制表示法。最終的結果也會采用該種表示法。具體而言&#xff0c;從低位往高位數起&#xf…

【linux】yum安裝時: Couldn‘t resolve host name for XXXXX

yum 安裝 sysstat 報錯了&#xff1a; Kylin Linux Advanced Server 10 - Os 0.0 B/s | 0 B 00:00 Errors during downloading metadata for repository ks10-adv-os:- Curl error (6): Couldnt resolve host nam…

在非Spring環境下Main方法中,怎么使用spring的ThreadPoolTaskScheduler啟動Scheduler?

作為Java開發人員&#xff0c;在使用spring框架的時候&#xff0c;如果想要獲取到線程池對象&#xff0c;可以直接使用spring框架提供的ThreadPoolxxx來獲取。那么在非spring環境下&#xff0c;main函數怎么使用ThreadPoolTaskScheduler呢&#xff1f;下面凱哥(凱哥Java:kaigej…

10.vue3項目(十):spu管理頁面的sku的新增和修改

目錄 一、sku靜態頁面的搭建 1.思路分析 2.代碼實現 3.效果展示

微信小程序 長按錄音+錄制視頻

<view class"bigCircle" bindtouchstart"start" bindtouchend"stop"><view class"smallCircle {{startVedio?onVedio:}}"><text>{{startVedio?正在錄音:長按錄音}}</text></view> </view> <…

排序算法:【選擇排序]

一、選擇排序——時間復雜度 定義&#xff1a;第一趟排序&#xff0c;從整個序列中找到最小的數&#xff0c;把它放到序列的第一個位置上&#xff0c;第二趟排序&#xff0c;再從無序區找到最小的數&#xff0c;把它放到序列的第二個位置上&#xff0c;以此類推。 也就是說&am…

軟件項目管理---胡亂復習版

范圍控制的一個重點是避免需求的不合理擴張。(√)一個任務原計劃2個人全職工作2周完成,而實際上只有一個人參與這個任務,到第二周末這個人完成了任務的75%,那么:BCWS = 4人周,ACWP = 2人周,BCWP = 3人周。CV = 1,SV = -1。 【在項目管理中,BCWS、ACWP和BCWP是用來衡量…

微服務測試是什么?

微服務測試是一種特殊的測試類型&#xff0c;因為它涉及到多個獨立的服務。以下是進行微服務測試的一般性步驟&#xff1a; 1. 確定系統架構 了解微服務架構對成功測試至關重要。確定每個微服務的職責、接口、依賴項和通信方式。了解這些信息可以幫助您更好地規劃測試用例和測…

ip ssl證書怎么更換ip地址

ip ssl證書是一種數字證書&#xff0c;為只有公網ip地址的站點建立安全、加密的通信通道。它通常由權威的證書頒發機構&#xff08;CA&#xff09;頒發&#xff0c;并用于驗證網站的身份和安全性。ip ssl證書的主要目的是保護敏感信息&#xff0c;如信用卡號、用戶名和密碼等&a…

IO部分筆記

IO 概述 IO: 存儲和讀取數據的解決方案 作用: 用于讀寫文件中的數據(可以讀寫文件, 或網絡中的數據) IO流的分類 按流的方向: 輸入流, 輸出流 按操作文件類型: 字節流: 可以操作所有類型的文件 字符流: 只能操作純文本文件 純文本文件: windows自帶的記事本打開能讀懂…

react Hooks(useRef、useMemo、useCallback)實現原理

Fiber 上篇文章fiber簡單理解記錄了react fiber架構&#xff0c;Hooks是基于fiber鏈表來實現的。閱讀以下內容時建議先了解react fiber。 jsx -> render function -> vdom -> fiber樹 -> dom vdom 轉 fiber 的過程稱為 recocile。diff算法就是在recocile這個過程…

認識lambda架構(架構師考試復習)

Lambda架構主要分為三層&#xff0c;批處理層、加速層和服務層。 如下圖所示&#xff1a; &#xff08;1&#xff09;批處理層&#xff08;Batch Layer&#xff09;&#xff1a;存儲數據集&#xff0c;在數據集上預先計算查詢函數&#xff0c;并構建查詢對應的view。Batch Lay…

mysql 5.7 Unknown column ‘password‘ in ‘field list‘

問題現象&#xff1a; 執行sql : select user&#xff0c;host,password from user&#xff1b;時提示 ERROR 1054(42S22):Unknown column password in field list 現象如下圖所示&#xff1a; mysql 5.7開始 密碼字段用&#xff1a;authentication_string

Redis哨兵模式:什么是哨兵模式、哨兵模式的優缺點、哨兵模式的主觀下線和客觀下線、投票選舉、Redis 哨兵模式搭建

文章目錄 什么是哨兵模式哨兵模式的優缺點主觀下線和客觀下線投票選舉哨兵模式場景應用Redis version 6.0.5 集群搭建下載文件環境安裝解壓編譯配置文件啟動關閉密碼設置 什么是哨兵模式 哨兵模式是Redis的高可用解決方案之一&#xff0c;它旨在提供自動故障轉移和故障檢測的功…