angular5 路由传参的几种方式
此处介绍三种方式
方式一:
问号后面带的参数,
例如:/product?id=1&name=iphone还可以是: [routerLink]="['/books']" [queryParams]="{bookname:'《活着》'}
获取参数的方式:ActivatedRoute.queryParams[id]
方式二:
冒号形式,
例如:path:/product/:id
获取参数的方式:ActivatedRoute.params[id]
方式三:
js里的路径跳转
例如:path:/product,component:ProductComponent,data:[{madeInChina:true}]}
获取参数的方式: ActivatedRoute.snapshot.data[0][madeInChina]
angular5 路由传参的几种方式的更多相关文章
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue-router 路由传参的几种方式,刷新页面参数丢失
常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- Vue-router路由传参的三种方式
本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...
- vue里面路由传参的三种方式
1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...
- vue路由传参的三种方式
方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...
- React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】!!!
路由传值的三种方式(v5.x) params参数 //路由链接(携带参数): <Link to='/demo/test/tom/18'}>详情</Link> //或 <L ...
- react --- 路由传参的几种方式
1.params 优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋. 2.query 优势:传参优雅,传递参数可传对象:缺点:刷新地址栏,参数丢失 ...
随机推荐
- wcf 服务器无法处理请求由于内部错误
The server was unable to process the request due to an internal error. For more information about t ...
- Object-C-NSString
NSString *info=@"Hello world"; NSString *info=[[NSString alloc]initWithFormat:@"my na ...
- POJ 分类
初期: 一.基本算法: (1)枚举. (poj1753,poj2965) (2)贪心(poj1328,poj2109,poj2586) (3)递归和分治法. ( ...
- 把kafka数据从hbase迁移到hdfs,并按天加载到hive表(hbase与hadoop为不同集群)
需求:由于我们用的阿里云Hbase,按存储收费,现在需要把kafka的数据直接同步到自己搭建的hadoop集群上,(kafka和hadoop集群在同一个局域网),然后对接到hive表中去,表按每天做分 ...
- Mocha describe 生命周期
1 describe('test', function() { 2 // 在本测试块的所有测试用例之前执行且仅执行一次 3 before(function() { 4 5 }); 6 // 在本测试块 ...
- php 获取随机数的几个方式
php 获取随机数的几个方式 1.直接获取从min-max的数,例如1-20:$randnum = mt_rand(1, 20); 2.在一个数组里面随机选择一个(验证码的时候需要字母.数字混合的情况 ...
- Q_DECLARE_PRIVATE与Q_DECLARE_PUBLIC
Q_DECLARE_PRIVATE与Q_DECLARE_PUBLIC 这两个宏在Qt的源码中随处可见,重要性不言而喻.在 部落格的 Inside Qt Series 系列文章中,他用了3篇文章来讲这个 ...
- Tomcat的work目录作用
Tomcat的work目录作用 很多网友喜欢把tomcat的work目录里的东西叫做缓存,其实那不是很恰当,work目录只是tomcat的工作目录,也就是tomcat把jsp转换为class文件的工作 ...
- Docker搭建RabbitMQ集群
Docker搭建RabbitMQ集群 Docker安装 见官网 RabbitMQ镜像下载及配置 见此博文 集群搭建 首先,我们需要启动运行RabbitMQ docker run -d --hostna ...
- nginx location正则写法
nginx location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # ...