Vue中router-link介紹

<router-link>
<router-link> 組件支持用戶在具有路由功能的應(yīng)用中(點擊)導(dǎo)航。 通過 to 屬性指定目標地址瘦癌,默認渲染成帶有正確鏈接的 <a> 標簽哈街,可以通過配置 tag 屬性生成別的標簽.铸本。另外描融,當目標路由成功激活時镇匀,鏈接元素自動設(shè)置一個表示激活的 CSS 類名瓣俯。
<router-link> 比起寫死的 <a href="..."> 會好一些闰非,理由如下:
無論是 HTML5 history 模式還是 hash 模式剩盒,它的表現(xiàn)行為一致呆瞻,所以台夺,當你要切換路由模式,或者在 IE9 降級使用 hash 模式痴脾,無須作任何變動颤介。
在 HTML5 history 模式下,router-link 會攔截點擊事件明郭,讓瀏覽器不在重新加載頁面买窟。
當你在 HTML5 history 模式下使用 base 選項之后,所有的 to 屬性都不需要寫(基路徑)了薯定。

Props

to

類型: string | Location
required

表示目標路由的鏈接始绍。當被點擊后,內(nèi)部會立刻把 to 的值傳到 router.push()话侄,所以這個值可以是一個字符串或者是描述目標位置的對象亏推。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結(jié)果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表達式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不寫 v-bind 也可以学赛,就像綁定別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 帶查詢參數(shù),下面的結(jié)果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

類型: boolean
默認值: false

設(shè)置 replace 屬性的話吞杭,當點擊時盏浇,會調(diào)用 router.replace() 而不是 router.push(),于是導(dǎo)航后不會留下 history 記錄芽狗。<router-link :to="{ path: '/abc'}" replace></router-link>

append

類型: boolean
默認值: false

設(shè)置 append 屬性后绢掰,則在當前(相對)路徑前添加基路徑。例如童擎,我們從 /a 導(dǎo)航到一個相對路徑 b滴劲,如果沒有配置 append,則路徑為 /b顾复,如果配了班挖,則為 /a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

類型: string
默認值: "a"

有時候想要 <router-link> 渲染成某種標簽,例如<li>芯砸。 于是我們使用 tag prop 類指定何種標簽萧芙,同樣它還是會監(jiān)聽點擊,觸發(fā)導(dǎo)航假丧。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結(jié)果 -->
<li>foo</li>

active-class

類型: string
默認值: "router-link-active"

設(shè)置 鏈接激活時使用的 CSS 類名双揪。默認值可以通過路由的構(gòu)造選項 linkActiveClass 來全局配置。

exact

類型: boolean
默認值: false

"是否激活" 默認類名的依據(jù)是 inclusive match (全包含匹配)虎谢。 舉個例子盟榴,如果當前的路徑是 /a 開頭的,那么 <router-link to="/a"> 也會被設(shè)置 CSS 類名婴噩。

按照這個規(guī)則,<router-link to="/"> 將會點亮各個路由羽德!想要鏈接使用 "exact 匹配模式"几莽,則使用 exact 屬性:

  <!-- 這個鏈接只會在地址為 / 的時候被激活 -->
  <router-link to="/" exact>

查看更多關(guān)于激活鏈接類名的例子 可運行.
將"激活時的CSS類名"應(yīng)用在外層元素
有時候我們要讓 "激活時的CSS類名" 應(yīng)用在外層元素,而不是<a> 標簽本身宅静,那么可以用 <router-link> 渲染外層元素章蚣,包裹著內(nèi)層的原生<a>標簽:

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

在這種情況下,<a> 將作為真實的鏈接(它會獲得正確的 href 的)姨夹,而 "激活時的CSS類名" 則設(shè)置到外層的<li>纤垂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市磷账,隨后出現(xiàn)的幾起案子峭沦,更是在濱河造成了極大的恐慌,老刑警劉巖逃糟,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吼鱼,死亡現(xiàn)場離奇詭異蓬豁,居然都是意外死亡,警方通過查閱死者的電腦和手機菇肃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進店門地粪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人琐谤,你說我怎么就攤上這事蟆技。” “怎么了斗忌?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵付魔,是天一觀的道長。 經(jīng)常有香客問我飞蹂,道長几苍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任陈哑,我火速辦了婚禮妻坝,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘惊窖。我一直安慰自己刽宪,他們只是感情好,可當我...
    茶點故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布界酒。 她就那樣靜靜地躺著圣拄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪毁欣。 梳的紋絲不亂的頭發(fā)上庇谆,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天,我揣著相機與錄音凭疮,去河邊找鬼饭耳。 笑死,一個胖子當著我的面吹牛执解,可吹牛的內(nèi)容都是我干的寞肖。 我是一名探鬼主播,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼衰腌,長吁一口氣:“原來是場噩夢啊……” “哼新蟆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起右蕊,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤琼稻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后尤泽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體欣簇,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡规脸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了熊咽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片莫鸭。...
    茶點故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖横殴,靈堂內(nèi)的尸體忽然破棺而出被因,到底是詐尸還是另有隱情,我是刑警寧澤衫仑,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布梨与,位于F島的核電站,受9級特大地震影響文狱,放射性物質(zhì)發(fā)生泄漏粥鞋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一瞄崇、第九天 我趴在偏房一處隱蔽的房頂上張望呻粹。 院中可真熱鬧,春花似錦苏研、人聲如沸等浊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽筹燕。三九已至,卻和暖如春衅鹿,著一層夾襖步出監(jiān)牢的瞬間撒踪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工塘安, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留糠涛,地道東北人。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓兼犯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親集漾。 傳聞我的和親對象是個殘疾皇子切黔,可洞房花燭夜當晚...
    茶點故事閱讀 43,499評論 2 348

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)具篇,斷路器纬霞,智...
    卡卡羅2017閱讀 134,629評論 18 139
  • 路由 動態(tài)路由匹配 我們經(jīng)常需要把某種模式匹配到的所有路由,全部映射到同一個組件驱显,例如我們有一個user組件用來展...
    羊烊羴閱讀 699評論 0 0
  • github地址孩哑,歡迎大家提交更新。 express() express()用來創(chuàng)建一個Express的程序翠桦。ex...
    Programmer客棧閱讀 2,503評論 0 1
  • 推薦我的vue教程:VUE系列教程目錄 前言 通過前面我寫的VUE入門博客横蜒,相信已經(jīng)大概了解VUE是何物,但是對于...
    儂姝沁兒閱讀 2,965評論 4 19
  • vue2有著深度繼承的路由插件销凑,即:vue-router丛晌,其中文的API地址。 vue-router與其他的路由(...
    白水螺絲閱讀 17,524評論 0 17