Vue頁面偶爾樣式錯亂,刷新即恢復(fù)的問題及解決
更新時間：2023年07月19日 10:51:33 作者：isHuPei
這篇文章主要介紹了Vue頁面偶爾樣式錯亂,刷新即恢復(fù)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue頁面偶爾樣式錯亂,刷新即恢復(fù)
vue項目樣式偶爾錯亂崩潰，如下圖一，當(dāng)刷新該頁面后又恢復(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)進(jìn)來
瀏覽器直接修改地址訪問
解決方法
給<style>添加scoped屬性：
該屬性的作用是指定組件內(nèi)css指定作用域，使得css樣式只在當(dāng)前文件中起作用，與其它組件出現(xiàn)重名而造成屬性污染。
<style> <style scoped> ... ====> ... </style> </style>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中定義src在img標(biāo)簽使用時加載不出來的解決
這篇文章主要介紹了Vue中定義src在img標(biāo)簽使用時加載不出來的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue中使用kindeditor富文本編輯器的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue頂部菜單欄實現(xiàn)小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue filters過濾器的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04
vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù)的方法處理
這篇文章主要介紹了vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
本文主要介紹了vue3中watch和watchEffect的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue3自定義確認(rèn)密碼匹配驗證規(guī)則的操作代碼
這篇文章主要介紹了vue3自定義確認(rèn)密碼匹配驗證規(guī)則的操作代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
使用自動導(dǎo)入后eslint報錯eslint9的問題及解決方法
本文介紹了使用`pnpm create vue@latest`創(chuàng)建Vue應(yīng)用時,如何配置ESLint和Prettier,包括解決兩者沖突以及自動導(dǎo)入后Eslint報錯的問題,感興趣的朋友一起看看吧2025-03-03