Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)
前言
除了使用Router的navigate()方法切換路由，Angular2還提供了一個指令用來 將一個DOM對象增強為路由入口：
@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對象添加click事件監(jiān)聽，在觸發(fā)時調(diào)用Router的 navigate()方法進行路由。
不過本文主要介紹的是關(guān)于Angular之RouterLink花式跳轉(zhuǎn)的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細的介紹吧。
routerLink本身支持兩種寫法：
<a routerLink="detail"> </a> <a [routerLink]="['detail']"> </a>
routerLink的值有哪些寫法，又有什么區(qū)別呢？
假設(shè)當(dāng)前路由為
`http://localhost:4200/#/doc/license`
寫法1 ： 絕對路徑 / + 路由名字
<!--跳到 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)的絕對路徑。
寫法2 ： 一個路由名字 路由名字
<a [routerLink]="['demo']" >跳呀跳</a>
那么url是http://localhost:4200/#/doc/license/(demo)，即http://localhost:4200/#/doc/license + 你要跳轉(zhuǎn)的絕對路徑,這時候它會給你的路由加些東西變成 /(demo),跳轉(zhuǎn)不了。
寫法3 ：相對路徑 ../路由名字
<a [routerLink]="['../demo']" >跳呀跳</a>
那么url是
http://localhost:4200/#/doc/demo，即 http://localhost:4200/#/doc + 你要跳轉(zhuǎn)的相對路徑。它會從上一級開始尋找。
寫法4 ： ./路由名字， 即現(xiàn)在的路由+你寫的要跳去的路由
<a [routerLink]="['./demo']" >跳呀跳</a>
那么url是
http://localhost:4200/#/doc/license/demo上，即 http://localhost:4200/#/doc/license + 你要跳轉(zhuǎn)的相對路徑。它會從當(dāng)前路由的下一級開始尋找此匹配的路由進行跳轉(zhuǎn)。
| 更多API用法更新于 github
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了詳解Angular cli配置過程記錄，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了關(guān)于angularJs清除瀏覽器緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Angular.JS利用ng-disabled屬性和ng-model實現(xiàn)禁用button效果
這篇文章主要介紹了Angular.JS利用ng-disabled屬性和ng-model實現(xiàn)禁用button效果的相關(guān)資料，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了淺析AngularJs HTTP響應(yīng)攔截器的相關(guān)資料,需要的朋友可以參考下2015-12-12
Angular HMR(熱模塊替換)功能實現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
延遲加載是一種限制加載用戶當(dāng)前需要的模塊的方法,這可以提高應(yīng)用程序的性能并減小初始捆綁包大小,在本文中,您學(xué)習(xí)了如何在 Angular 應(yīng)用程序中使用惰性加載路由,本文分步驟講解的非常詳細,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了AngularJS封裝指令方法,結(jié)合實例形式詳細分析了AngularJS的功能、jQuery類庫協(xié)作及組件封裝的具體操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了淺談angular2路由預(yù)加載策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
AngularJS動態(tài)綁定ng-options的ng-model實例代碼
本篇文章主要介紹了AngularJS動態(tài)綁定ng-options的ng-model實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06