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工具 Event封装
Aug 21 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
AngularJS入门之动画
Jul 27 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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通过rmdir删除目录的简单用法
2015/03/18 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python处理xml文件的方法小结
2017/05/02 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
班级心理活动总结
2014/07/04 职场文书
高中校园广播稿
2014/10/21 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
男人帮观后感
2015/06/18 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
教师节主题班会教案
2015/08/17 职场文书
工作计划范文之财务管理
2019/08/09 职场文书