前言
除了使用Router的navigate()方法切換路由,Angular2還提供了一個(gè)指令用來 將一個(gè)DOM對(duì)象增強(qiáng)為路由入口:
@View({ directives:[RouterOutlet,RouterLink] template : `<nav> <b router-link="video">video</b> | <b router-link="music">music</b> </nav> <router-outlet></router-outlet>` })
RouterLink指令為宿主DOM對(duì)象添加click事件監(jiān)聽,在觸發(fā)時(shí)調(diào)用Router的 navigate()方法進(jìn)行路由。
不過本文主要介紹的是關(guān)于Angular之RouterLink花式跳轉(zhuǎn)的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧。
routerLink本身支持兩種寫法:
<a routerLink="detail"> </a> <a [routerLink]="['detail']"> </a>
routerLink的值有哪些寫法,又有什么區(qū)別呢?
假設(shè)當(dāng)前路由為
`http://localhost:4200/#/doc/license`
寫法1 : 絕對(duì)路徑 / + 路由名字
<!--跳到 http://localhost:4200/#/doc/license --> <a [routerLink]="['/doc/demo']" >跳呀跳</a> <!--跳到 http://localhost:4200/#/demo --> <a [routerLink]="['/demo']" >跳呀跳</a>
那么url是
http://localhost:4200/#/doc/demo上跳轉(zhuǎn),即 http://localhost:4200/#/ + 你要跳轉(zhuǎn)的絕對(duì)路徑。
寫法2 : 一個(gè)路由名字 路由名字
<a [routerLink]="['demo']" >跳呀跳</a>
那么url是http://localhost:4200/#/doc/license/(demo),即http://localhost:4200/#/doc/license + 你要跳轉(zhuǎn)的絕對(duì)路徑,這時(shí)候它會(huì)給你的路由加些東西變成 /(demo),跳轉(zhuǎn)不了。
寫法3 :相對(duì)路徑 ../路由名字
<a [routerLink]="['../demo']" >跳呀跳</a>
那么url是
http://localhost:4200/#/doc/demo,即 http://localhost:4200/#/doc + 你要跳轉(zhuǎn)的相對(duì)路徑。它會(huì)從上一級(jí)開始尋找。
寫法4 : ./路由名字, 即現(xiàn)在的路由+你寫的要跳去的路由
<a [routerLink]="['./demo']" >跳呀跳</a>
那么url是
http://localhost:4200/#/doc/license/demo上,即 http://localhost:4200/#/doc/license + 你要跳轉(zhuǎn)的相對(duì)路徑。它會(huì)從當(dāng)前路由的下一級(jí)開始尋找此匹配的路由進(jìn)行跳轉(zhuǎn)。
| 更多API用法更新于 github
總結(jié)
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com