您好,登錄后才能下訂單哦!
小編給大家分享一下Angular中RouterLink花式跳轉(zhuǎn)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
前言
除了使用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)。
以上是“Angular中RouterLink花式跳轉(zhuǎn)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。