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 优势:传参优雅,传递参数可传对象:缺点:刷新地址栏,参数丢失 ...
随机推荐
- redis桌面管理工具 redis-desktop-manager使用指南(转)
版权声明:转自 http://blog.csdn.net/li396864285/article/details/54629898 概要:一款好用的Redis桌面管理工具,支持命令控制台操作, ...
- MSF渗透测试-CVE-2017-11882(MSOffice漏洞)
1.测试环境 2.测试前准备 3.测试过程 -3.1虚拟机环境测试 -3.2局域网靶机测试 4.测试感想 1.测试环境 攻击机: OS:kail IP:192.168.15.132/192.168.1 ...
- Swift Optional
拆包和解包的原因: 其实所谓的 nil 就是 Optional.None, 非 nil 就是Optional.Some, 然后会通过Some(T)包装(wrap)原始值,这也是为什么在使用 Optio ...
- Q-learning简明实例
本文是对 http://mnemstudio.org/path-finding-q-learning-tutorial.htm 的翻译,共分两部分,第一部分为中文翻译,第二部分为英文原文.翻译时为方便 ...
- Python 运算符与基本数据类型
一.运算符 1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算: 二.基本数据类型 1.空(None) 表示该值是一个空对象,空值是Python里一个特殊的值,用None表示 ...
- python webdriver firefox 登录126邮箱,先添加联系人,然后进入首页发送邮件,带附件。
代码:#encoding=utf-8from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom ...
- bzoj1643 / P2666 [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪
[Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪 简单的dfs题 枚举前3个完全平方数,判断最后一个是不是完全平方数,统计合法方案数即可. (zz选手竟把数 ...
- 20145101《Java程序设计》第一周学习总结
20145101 <Java程序设计>第1周学习总结 教材学习内容总结 开学的第一周,通过课上老师的介绍和课下阅读教材我简单的了解java的发展历程,了解了JVM.JRE.JDK分别是什么 ...
- Python3基础 list 访问列表中的列表的元素
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Python3基础 list sort 从小(大)到大(小)排序
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...