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 获取字符串字节数的多种方法
Jun 02 Javascript
取选中的radio的值
Jan 11 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
JS实现点星星消除小游戏
Mar 24 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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
Python中zfill()方法的使用教程
2015/05/20 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python编程求质数实例代码
2018/01/31 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
函数指针的定义是什么
2016/08/14 面试题
自主招生自荐信范文
2013/12/04 职场文书
军神教学反思
2014/02/04 职场文书
2014年国庆标语
2014/06/30 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
整改通知书
2015/04/20 职场文书
实战Python爬虫爬取酷我音乐
2022/04/11 Python