前言
如圖所示，當我從profile頁跳轉回index頁時，頁面樣式錯亂：
這是index頁面一開始的樣子，然後我們跳轉到profile頁面
這是profile頁面，然後我們再跳轉回index頁面
這個時候問題就來了，可以明顯的看到首頁的樣式被破壞了，那麼爲什麼會這樣呢？
思考
想了一下意識到，大概率是因爲vue加載組件的時候，會把所有組件的css全部加載到一起，而這個時候樣式是全局的，vue會偷懶不再渲染當前頁面的樣式
思路我們找到了，那麼該如何解決呢？
解決
首先想到的是利用scoped來解決，在vue中引入了scoped這個概念，scoped的設計思想就是讓當前組件的樣式不會修改到其它地方的樣式，使用了data-v-hash的方式來使css有了它對應模塊的標識，這樣寫css的時候不需要加太多額外的選擇器，方便很多。
其中，最核心的一點就是限定它的作用域只侷限於當前頁面，不會影響到其他頁面
好的，說了這麼多，那我們來使用一下scoped
在index頁面的style標籤上加入scope
然後，在profile頁面的style標籤上加入scope
驗證
最後，我們來驗證一下結果
先是進入index頁面
然後跳轉到profile頁面
再跳回來，我們可以看到樣式沒有被破壞，可以正常顯示。
最後，如果本文對你有幫助的話，點個關注吧！