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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
原生js实现回复评论功能
Jan 18 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Preload基础使用方法详解
Feb 03 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
JavaScript实现缓动动画
Nov 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
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php实现微信发红包功能
2018/07/13 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jquery each()源代码
2011/02/14 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Vuex简单入门
2017/04/19 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
python函数局部变量用法实例分析
2015/08/04 Python
python生成式的send()方法(详解)
2017/05/08 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
详解Python中的四种队列
2018/05/21 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python序列类型的打包和解包实例
2019/12/21 Python
使用Django清空数据库并重新生成
2020/04/03 Python
查看keras的默认backend实现方式
2020/06/19 Python
python try...finally...的实现方法
2020/11/25 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
四种会话跟踪技术
2015/05/20 面试题
安全生产检讨书
2014/01/21 职场文书
班级文化标语
2014/06/23 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
java基础——多线程
2021/07/03 Java/Android
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android