router-link 樣式

<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)擊事件,讓瀏覽器不再重新加載頁(yè)面。

  • 當(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)行全局配置的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,564評(píng)論 19 139
  • 點(diǎn)擊之前的樣式是和a標(biāo)簽一樣 點(diǎn)擊之后通過類router-link-active來改變樣式
    嘿喵heyMeow閱讀 6,465評(píng)論 2 0
  • <router-link><router-link> 組件支持用戶在具有路由功能的應(yīng)用中(點(diǎn)擊)導(dǎo)航。 通過 to...
    乖乖果效36閱讀 1,779評(píng)論 0 1
  • VUE Vue :數(shù)據(jù)驅(qū)動(dòng)的M V Vm框架 m :model(后臺(tái)提供數(shù)據(jù)),v :view(頁(yè)面),vM(模板...
    wudongyu閱讀 5,528評(píng)論 0 11
  • 用Vue.js + vue-router創(chuàng)建單頁(yè)應(yīng)用,是非常簡(jiǎn)單的,基本是這樣的: 組件 → 路由 → 渲染地方 ...
    阿go閱讀 1,449評(píng)論 0 0

友情鏈接更多精彩內(nèi)容