總之今天要記錄的是在超連結中加入樣式...然後
.
.
.
詞窮不打了 > O <
好啦=.=
這次要記錄的分為三種,不過其中一個算是概念而已XD
1.基本樣式
2.路由樣式的概念
3.上層樣式
先來page的css中增加一個樣式
再回頭html套用樣式
這時候超連結的背景顏色已經被改變了
在這邊有人發現我的路由是「預設」,並非連接到page2嗎?
主因是因為這邊是在做紀錄,而routerLinkActive會依據routerLink的路徑,去比對網址列
當網址與路由相符時,套用的樣式才會生效!
若是我把路由寫成這樣的話在路由為「/」的時候,是沒有任何效果的
再來我們換個使用情境看看
當我點了漢堡選單,從第一層分類,進入第二層的超連結時,只有第二層超連結的樣式會被改變
那該怎麼處理呢?很簡單直接把樣式往上移就好XD
最後要特別介紹的是routerLinkActiveOptions="{ exact: true }"
由於路由的屬性比對是從根目錄開始做比對,因此即使在MyPage的路由中,根路由一樣會生效而間接套用到樣式,要避免這種情況的話,就在屬性中再加個routerLinkActiveOptions="{ exact: true }"吧!
歡迎您的加入,讓這個社群更加美好!