angular 路由传参的三种方式

r囧r小猫 2023-03-13 05:18 17阅读 0赞

**1.问号后面带的参数**

url：[http://localhost:4200/news?key=japan][http_localhost_4200_news_key_japan]

html调用方法：

<a \[routerLink\]="\['/news'\]" \[queryParams\]="\{key: 'japan'\}">跳转</a>

ts调用方法：

private router: Router

this.router.navigate(\['/news'\], \{queryParams: \{key : 'japan'\}\});

获取参数方法：

private route: ActivatedRoute;

this.route.**queryParams**.subscribe(queryParams=> \{  
   console.log(queryParams.key);  
\});

const key = this.route.snapshot.queryParams\['key'\];

console.log("key", key);

**2.路由路径传参**

url：[http://localhost:4200/news/japan][http_localhost_4200_news_japan] （注意：这里的路由参数是必须的）

路由路径配置：

path: 'news/:key',  
component: NewsComponent

html调用方法：

<a \[routerLink\]="\['/news', 'japan'\]">跳转</a>

ts调用方法：

private router: Router

this.router.navigate(\['/news', 'japan'\]);

获取参数方法：

this.route.params.subscribe(params => \{  
  console.log("params", params.key);  
\});  
const key = this.route.snapshot.params\['key'\];  
console.log("key", key);

**3.在路由配置中传参**（注意：可以用于自定义路由预加载）

路由路径配置：

path: "news",  
component: NewsComponent,  
data: \{ key: "hero" \}

获取参数方法：

this.route.data.subscribe(params => \{  
  console.log("params", params.key);  
\});  
const key = this.route.snapshot.params\['key'\];  
console.log("key", key);

[http_localhost_4200_news_key_japan]: http://localhost:4200/news?key=japan
[http_localhost_4200_news_japan]: http://localhost:4200/news/japan

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular 路由传参的三种方式

1.问号后面带的参数 url：[http://localhost:4200/news?key=japan][http_localhost_4200_news_key_japa

r囧r小猫/ 2023年03月13日 05:18/ 0 赞/ 18 阅读

相关 vue路由传参的三种基本方式

方式一：直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/$

秒速五厘米/ 2023年03月06日 03:35/ 0 赞/ 193 阅读

相关 vue路由传参的三种基本方式

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v-for="article in articles

本是古典何须时尚/ 2023年02月10日 12:27/ 0 赞/ 28 阅读

相关 Vue 路由的两种传参方式

路由的第一种传参方式query 采用将参数写在路由的地址后面进行传参：？名字=value 第一种传参方式在 this.$route.query 中，如图所示： ![在

比眉伴天荒/ 2022年12月21日 03:28/ 0 赞/ 256 阅读

相关 Vue路由传参的三种基本方式

Vue路由传参的三种基本方式参考与这篇文章[https://www.jianshu.com/p/d276dcde6656][https_www.jianshu.com_

朴灿烈づ我的快乐病毒、/ 2022年09月02日 11:50/ 0 赞/ 276 阅读

相关 vue中路由传参的三种方式

第一种，第三种方法页面刷新数据不会丢失; 第二种方法页面刷新数据会丢失; <table> <thead> <tr> <th style="width

男娘i/ 2022年08月29日 00:11/ 0 赞/ 258 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 331 阅读

相关 angular 路由传参

.state('xxxx', \{ url: 'xxxx', templateUrl: 'xxx.html', controller: 'xxxxController',

冷不防/ 2022年05月17日 23:16/ 0 赞/ 340 阅读

相关 vue路由传参的三种基本方式

<li v-for="article in articles" @click="getDescribe(article.id)"> 方案一： getDe

╰半夏微凉°/ 2021年12月13日 18:15/ 0 赞/ 380 阅读

相关 Vue路由传参的几种方式

前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数

小咪咪/ 2021年09月15日 23:12/ 0 赞/ 493 阅读