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)擊事件稠茂,讓瀏覽器不再重新加載頁面柠偶。

  • 當(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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市捂掰,隨后出現(xiàn)的幾起案子敢会,更是在濱河造成了極大的恐慌,老刑警劉巖这嚣,帶你破解...
    沈念sama閱讀 211,376評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸥昏,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡疤苹,警方通過查閱死者的電腦和手機(jī)互广,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來卧土,“玉大人,你說我怎么就攤上這事像樊∮容海” “怎么了?”我有些...
    開封第一講書人閱讀 156,966評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵生棍,是天一觀的道長颤霎。 經(jīng)常有香客問我,道長涂滴,這世上最難降的妖魔是什么友酱? 我笑而不...
    開封第一講書人閱讀 56,432評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮柔纵,結(jié)果婚禮上缔杉,老公的妹妹穿的比我還像新娘。我一直安慰自己搁料,他們只是感情好或详,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著郭计,像睡著了一般霸琴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上昭伸,一...
    開封第一講書人閱讀 49,792評(píng)論 1 290
  • 那天梧乘,我揣著相機(jī)與錄音,去河邊找鬼庐杨。 笑死选调,一個(gè)胖子當(dāng)著我的面吹牛嗡善,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播学歧,決...
    沈念sama閱讀 38,933評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼罩引,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了枝笨?” 一聲冷哼從身側(cè)響起袁铐,我...
    開封第一講書人閱讀 37,701評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎横浑,沒想到半個(gè)月后剔桨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,143評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡徙融,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評(píng)論 2 327
  • 正文 我和宋清朗相戀三年洒缀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欺冀。...
    茶點(diǎn)故事閱讀 38,626評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡树绩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出隐轩,到底是詐尸還是另有隱情饺饭,我是刑警寧澤,帶...
    沈念sama閱讀 34,292評(píng)論 4 329
  • 正文 年R本政府宣布职车,位于F島的核電站瘫俊,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏悴灵。R本人自食惡果不足惜扛芽,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望积瞒。 院中可真熱鬧川尖,春花似錦、人聲如沸赡鲜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽银酬。三九已至嘲更,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間揩瞪,已是汗流浹背赋朦。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宠哄。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓壹将,卻偏偏與公主長得像,于是被迫代替她去往敵國和親毛嫉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子诽俯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

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