此处介绍三种方式

方式一:

     问号后面带的参数,

        例如:/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 路由传参的几种方式的更多相关文章

  1. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  2. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  3. vue-router 路由传参的几种方式,刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

  4. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  5. Vue-router路由传参的三种方式

    本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...

  6. vue里面路由传参的三种方式

    1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...

  7. vue路由传参的三种方式

    方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...

  8. React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】!!!

    路由传值的三种方式(v5.x) params参数 //路由链接(携带参数): <Link to='/demo/test/tom/18'}>详情</Link> //或 <L ...

  9. react --- 路由传参的几种方式

    1.params 优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋. 2.query 优势:传参优雅,传递参数可传对象:缺点:刷新地址栏,参数丢失 ...

随机推荐

  1. Vue项目使用AES做加密

    1.先在vue项目中安装crypto-js 2.在项目中新建一个utils.js文件 3.utils.js文件中的内容 /** * 工具类 */ import Vue from 'vue' impor ...

  2. Integer类之成员变量

    一.一共11个成员变量. 二.详情介绍. 1.value值.这个是Integer类的唯一标志.最重要的实例属性. 2.最小值和最大值常量.注意,计算机里面是以补码形式保存的,因此用十六进制时,给的数据 ...

  3. mysql中char和varchar详解

    一.首先创建表. CREATE TABLE `t1` ( `id` int(11) DEFAULT NULL, `a` char(255) DEFAULT NULL) ENGINE=InnoDB DE ...

  4. zookeeper简单实战

    一.安装(单机模式.集群模式.伪集群模式) 1:安装JDK 2:解压zk压缩包 3:在conf目录下创建zoo.cfg配置文件. 设置超时时间,快照目录,事务日志文件目录,对外端口,服务IP 4:启动 ...

  5. 原生http模块与使用express框架对比

    node的http创建服务与利用Express框架有何不同 原生http模块与使用express框架对比: const http = require("http"); let se ...

  6. \r与\n

    \n是换行,英文是New line \r是回车,英文是Carriage return

  7. 文本框获取光标位置 ---- ctrl+enter换行

    业务需求:按下enter键发送信息,按下ctrl+enter键换行 下面代码是网上找的资料 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  8. P1661 扩散

    P1661 扩散 二分+最小生成树(kruskal使用并查集) 不清楚的题意导致我被坑了qwq,其实间接联通也是允许的.所以可以使用并查集+最小生成树维护 每次二分答案,然后跑一遍最小生成树判断是否联 ...

  9. 微信小程序开发环境

    微信小程序开发环境 不忘初心,方得始终.初心易得,始终难守 小程序开发环境 开发工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devt ...

  10. C语言程序设计实习报告

    C语言程序设计实习报告 简介 语言实践心得体会范文在科技高度发展的今天,计算机在人们之中的作用越来越突出.而c语言作为一种计算机的语言,我们学习它,有助于我们更好的了解计算机,与计算机进行交流,因此, ...