Vue頁面偶爾樣式錯亂,刷新即恢復(fù)的問題及解決
更新時間：2023年07月19日 10:51:33 作者：isHuPei
這篇文章主要介紹了Vue頁面偶爾樣式錯亂,刷新即恢復(fù)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue頁面偶爾樣式錯亂,刷新即恢復(fù)
vue項目樣式偶爾錯亂崩潰，如下圖一，當刷新該頁面后又恢復(fù)正常，見圖二。
圖一： 登錄字體與表單不居中
圖二：
解決辦法
1、style樣式加 scoped (最通用的辦法)
2、網(wǎng)絡(luò)不穩(wěn)定等情況
3、盡量不使用float，如果在你偶爾錯亂的樣式里發(fā)現(xiàn)了float，試著刪掉該屬性后再看看
vue3 router跳轉(zhuǎn)到的頁面樣式錯亂
通過router.push()跳轉(zhuǎn)和瀏覽器直接修改地址訪問同一頁面的樣式不一樣
通過router.push()跳轉(zhuǎn)從登錄頁面跳轉(zhuǎn)進來
瀏覽器直接修改地址訪問
解決方法
給<style>添加scoped屬性：
該屬性的作用是指定組件內(nèi)css指定作用域，使得css樣式只在當前文件中起作用，與其它組件出現(xiàn)重名而造成屬性污染。
<style> <style scoped> ... ====> ... </style> </style>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue源碼學習之Object.defineProperty 對數(shù)組監(jiān)聽
這篇文章主要介紹了vue源碼學習之Object.defineProperty 對數(shù)組監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue3父子通訊方式及Vue3插槽的使用方法詳解,需要的朋友可以參考下2023-01-01
詳解mpvue scroll-view自動回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了在vue項目中利用popstate處理頁面返回的操作介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
關(guān)于ElementUI的el-upload組件二次封裝的問題
這篇文章主要介紹了關(guān)于ElementUI的el-upload組件二次封裝的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的輪播圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
關(guān)于row-click和current-change的用法及說明
文章介紹了row-click和current-change事件的使用,并詳細描述了在表格聯(lián)動需求下,僅使用row-click時遇到的問題及解決方案,最終得出結(jié)論,current-change事件在行數(shù)據(jù)或行焦點改變時均會觸發(fā),更適合用于表格聯(lián)動需求2026-04-04
Vue實現(xiàn)類似Spring官網(wǎng)圖片滑動效果方法
這篇文章主要介紹了Vue實現(xiàn)類似Spring官網(wǎng)圖片滑動效果方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Vue報錯：Uncaught TypeError: Cannot assign to read only propert
這篇文章主要給大家介紹了關(guān)于Vue報錯：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解決方法，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-06-06
element實現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動的示例
本文主要介紹了element實現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02