<router-link>
組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航中狂。 通過 to
屬性指定目標(biāo)地址蝶溶,默認(rèn)渲染成帶有正確鏈接的 <a>
標(biāo)簽绑雄,可以通過配置 tag
屬性生成別的標(biāo)簽.尔破。另外键科,當(dāng)目標(biāo)路由成功激活時(shí),鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名挠锥。
<router-link>
比起寫死的 <a href="...">
會(huì)好一些众羡,理由如下:
無論是 HTML5 history 模式還是 hash 模式,它的表現(xiàn)行為一致蓖租,所以粱侣,當(dāng)你要切換路由模式,或者在 IE9 降級(jí)使用 hash 模式蓖宦,無須作任何變動(dòng)齐婴。
在 HTML5 history 模式下,
router-link
會(huì)守衛(wèi)點(diǎn)擊事件稠茂,讓瀏覽器不再重新加載頁面柠偶。當(dāng)你在 HTML5 history 模式下使用
base
選項(xiàng)之后,所有的to
屬性都不需要寫 (基路徑) 了主慰。
將激活 class 應(yīng)用在外層元素
有時(shí)候我們要讓激活 class 應(yīng)用在外層元素嚣州,而不是 <a>
標(biāo)簽本身,那么可以用 <router-link>
渲染外層元素共螺,包裹著內(nèi)層的原生 <a>
標(biāo)簽:
<router-link tag="li" to="/foo">
<a>/foo</a>
</router-link>
在這種情況下该肴,<a>
將作為真實(shí)的鏈接 (它會(huì)獲得正確的 href
的),而 "激活時(shí)的CSS類名" 則設(shè)置到外層的 <li>
藐不。
active-class
類型:
string
-
默認(rèn)值:
"router-link-active"
設(shè)置 鏈接激活時(shí)使用的 CSS 類名匀哄。默認(rèn)值可以通過路由的構(gòu)造選項(xiàng)
linkActiveClass
來全局配置。
exact
類型:
boolean
-
默認(rèn)值:
false
"是否激活" 默認(rèn)類名的依據(jù)是 inclusive match (全包含匹配)雏蛮。 舉個(gè)例子涎嚼,如果當(dāng)前的路徑是
/a
開頭的,那么<router-link to="/a">
也會(huì)被設(shè)置 CSS 類名挑秉。按照這個(gè)規(guī)則法梯,每個(gè)路由都會(huì)激活
<router-link to="/">
!想要鏈接使用 "exact 匹配模式",則使用exact
屬性:<!-- 這個(gè)鏈接只會(huì)在地址為 / 的時(shí)候被激活 --> <router-link to="/" exact>
查看更多關(guān)于激活鏈接類名的例子可運(yùn)行
event
類型:
string | Array<string>
-
默認(rèn)值:
'click'
聲明可以用來觸發(fā)導(dǎo)航的事件立哑∫共眩可以是一個(gè)字符串或是一個(gè)包含字符串的數(shù)組。
exact-active-class
類型:
string
-
默認(rèn)值:
"router-link-exact-active"
配置當(dāng)鏈接被精確匹配的時(shí)候應(yīng)該激活的 class铛绰。注意默認(rèn)值也是可以通過路由構(gòu)造函數(shù)選項(xiàng)
linkExactActiveClass
進(jìn)行全局配置的诈茧。