Angular学习教程之RouterLink花式跳转


Posted in Javascript onMay 03, 2018

前言

除了使用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事件监听,在触发时调用Router的 navigate()方法进行路由。

不过本文主要介绍的是关于Angular之RouterLink花式跳转的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
简单的分页代码js实现
May 17 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
小程序实现搜索框
Jun 19 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 #Javascript
Vue表单类的父子组件数据传递示例
May 03 #Javascript
Webpack path与publicPath的区别详解
May 03 #Javascript
Webpack中publicPath路径问题详解
May 03 #Javascript
Angular Renderer (渲染器)的具体使用
May 03 #Javascript
react router4+redux实现路由权限控制的方法
May 03 #Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 #Javascript
You might like
PHP strtotime函数详解
2009/12/18 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
php英文单词统计器
2016/06/23 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
中专毕业自我鉴定
2013/10/16 职场文书
党员的自我评价范文
2014/01/02 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
深入理解go slice结构
2021/09/15 Golang
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
海弦WR-800F
2022/04/05 无线电
mysql sql常用语句大全
2022/06/21 MySQL