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)文章
詳解angularjs結(jié)合pagination插件實現(xiàn)分頁功能
本篇文章主要介紹了詳解angularjs結(jié)合pagination插件實現(xiàn)分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
下面小編就為大家?guī)硪黄狝ngular2環(huán)境搭建具體操作步驟(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
AngularJS自帶了很多驗證，什么必填，最大長度，最小長度...，這里記錄幾個有用的正則式驗證。本文給大家介紹的非常詳細，對angularjs中表單驗證知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
跨域，前端開發(fā)中經(jīng)常遇到的問題，下面這篇文章主要給大家介紹了關(guān)于angular.js中解決跨域問題的三種方式，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
AngularJS 通過新的屬性和表達式擴展了 HTML。本文主要給大家介紹Angularjs 滾動加載更多數(shù)據(jù)的相關(guān)知識，需要的朋友參考下吧2016-03-03
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
angular4響應(yīng)式表單與校驗實現(xiàn)demo
這篇文章主要介紹了angular4響應(yīng)式表單與校驗實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
大家都是在Reactive Extensions for Javascript誕生于幾年前，隨著angular2正式版的發(fā)布，它將會被更多開發(fā)者所認(rèn)知。這篇文章我們來詳細介紹RxJs提供的Observable對象，有需要的朋友們可以參考借鑒。2016-09-09
Angular6項目打包優(yōu)化的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Angular6項目打包優(yōu)化的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Angular6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了AngularJS 自定義指令，這里整理了詳細的資料及簡單實例代碼，有需要的小伙伴可以參考下2016-09-09