angular+routerlink跳转方式总结

这次给大家带来angular+routerlink跳转方式总结,angular+routerlink跳转方式总结的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

除了使用Router的navigate()方法切换路由,Angular2还提供了一个指令用来 将一个DOM对象增强为路由入口:

@View({directives:[RouterOutlet,RouterLink]template : ``})

登录后复制

RouterLink指令为宿主DOM对象添加click事件监听,在触发时调用Router的 navigate()方法进行路由。

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

routerLink本身支持两种写法:

登录后复制

routerLink的值有哪些写法,又有什么区别呢?

假设当前路由为

`http://localhost:4200/#/doc/license`

登录后复制

写法1 : 绝对路径  / + 路由名字

  跳呀跳   跳呀跳

登录后复制

那么url是

http://localhost:4200/#/doc/demo上跳转,即 http://localhost:4200/#/ + 你要跳转的绝对路径。

写法2 : 一个路由名字 路由名字

 跳呀跳

登录后复制

那么url是http://localhost:4200/#/doc/license/(demo),即http://localhost:4200/#/doc/license + 你要跳转的绝对路径,这时候它会给你的路由加些东西变成 /(demo),跳转不了。

写法3 :相对路径 ../路由名字

 跳呀跳

登录后复制

那么url是

http://localhost:4200/#/doc/demo,即 http://localhost:4200/#/doc + 你要跳转的相对路径。它会从上一级开始寻找。

写法4  : ./路由名字, 即现在的路由+你写的要跳去的路由

 跳呀跳

登录后复制

那么url是

http://localhost:4200/#/doc/license/demo上,即 http://localhost:4200/#/doc/license + 你要跳转的相对路径。它会从当前路由的下一级开始寻找此匹配的路由进行跳转。

| 更多API用法更新于 github

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

jquery判断元素内容是否存在

Nodejs+Electron ubuntu安装步骤详解

以上就是angular+routerlink跳转方式总结的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2761948.html

(0)
上一篇 2025年3月8日 09:41:59
下一篇 2025年3月8日 05:01:05

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue中watch使用方法总结

    这次给大家带来Vue中watch使用方法总结,Vue中watch使用的注意事项有哪些,下面就是实战案例,一起来看一下。 假设有如下代码: fullname: {{fullname}} FirstName: new Vue({ el: ‘#r…

    编程技术 2025年3月8日
    200
  • Angular5路由传值方法总结

    这次给大家带来Angular5路由传值方法总结,Angular5路由传值的注意事项有哪些,下面就是实战案例,一起来看一下。 目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是…

    编程技术 2025年3月8日
    200
  • Vue使用技巧总结

    这次给大家带来Vue使用技巧总结,Vue使用技巧总结的注意事项有哪些,下面就是实战案例,一起来看一下。 在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到…

    编程技术 2025年3月8日
    200
  • ES6使用技巧总结

    这次给大家带来ES6使用技巧总结,ES6使用的注意事项有哪些,下面就是实战案例,一起来看一下。 如果你还知道其他一些小技巧,欢迎留言。我很高兴把它们补充进来。 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函…

    编程技术 2025年3月8日
    200
  • 重点解答js的几种提交方式

    下面是js的几种提交方式 我们经常需要通过js来提交表单或者超链接 1.js提交表单( .submit()方法提交表单 ) function doSearch(){var action =”/User_queryAllUser”;docum…

    编程技术 2025年3月8日
    200
  • 如何在JS中实现打印的方式(结合代码详细解答)

    下面是我给大家整理的如何在js中实现打印的方式,有兴趣的同学可以去看看。 1.JS实现打印的方式 方式一:window.print() window.print();会弹出打印对话框,打印的是window.document.body.inn…

    编程技术 2025年3月8日
    200
  • 有关js string()常用方法总结(图文教程)

    下面是我给大家整理的js string()常用方法总结,有兴趣的同学可以去看看。 创建一个String 对象,语法:new String(stringValue),这个调用会将参数转换为字符串,并作为一个String 对象。事实上任何一个字…

    编程技术 2025年3月8日
    200
  • JavaScript创建对象的七种方式(总结,必读)

    这篇文章主要介绍了javascript创建对象的七种方式,工厂模式,构造函数模式,原型模式等分别在本文中做出了讲解,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。  JavaScript创建对象的方式有很多,通过Obj…

    编程技术 2025年3月8日
    200
  • js常见dom节点操作使用方法总结

    这次给大家带来js常见dom节点操作使用方法总结,js常见dom节点操作方法总结的注意事项有哪些,下面就是实战案例,一起来看一下。 DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接…

    编程技术 2025年3月8日
    200
  • jquery中ajax处理跨域的三大方式(图文教程)

    这篇文章主要介绍了jquery中ajax处理跨域的三大方式,感兴趣的小伙伴们可以参考一下 由于JS同源策略的影响,因此js只能访问同域名下的文档。因此要实现跨域,一般有以下几个方法: 一、处理跨域的方式: 1.代理 2.XHR2 HTML5…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论