routerLink本身支持两种写法:
<a routerLink="detail">
</a>
<a [routerLink]="['detail']">
</a>
复制代码
routerLink的值有哪些写法,又有什么区别呢?
假设当前路由为
`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
上跳转,即 http://localhost:4200/#/
+ 你要跳转的绝对路径
。
-
写法2 : 一个路由名字
路由名字
<a [routerLink]="['demo']" >跳呀跳</a>
复制代码
那么url是http://localhost:4200/#/doc/license/(demo)
,即http://localhost:4200/#/doc/license
+ 你要跳转的绝对路径
,这时候它会给你的路由加些东西变成 /(demo)
,跳转不了。
-
写法3 :相对路径
../路由名字
<a [routerLink]="['../demo']" >跳呀跳</a>
复制代码
那么url是 http://localhost:4200/#/doc/demo
,即 http://localhost:4200/#/doc
+ 你要跳转的相对路径
。它会从上一级开始寻找。
-
写法4 :
./路由名字
, 即现在的路由+你写的要跳去的路由
<a [routerLink]="['./demo']" >跳呀跳</a>
复制代码
那么url是 http://localhost:4200/#/doc/license/demo
上,即 http://localhost:4200/#/doc/license
+ 你要跳转的相对路径
。它会从当前路由的下一级开始寻找此匹配的路由进行跳转。
| 更多API用法更新于 github