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 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
Vue实现简单的跑马灯
May 25 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP调用Webservice实例代码
2011/07/29 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
js里的prototype使用示例
2010/11/19 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python目录与文件名操作例子
2016/08/28 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python机器学习之KNN分类算法
2018/08/29 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
服装设计专业毕业生推荐信
2013/11/09 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
经典促销广告词大全
2014/03/19 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
大学自主招生推荐信
2014/05/10 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
学生自我评语
2015/01/04 职场文书
社区国庆节活动总结
2015/03/23 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android