angular中路由跳转并传值四种方式

李琍發表於 2019-6-28 18:27:00

一、路由传值
  步骤1 路由传递参数注意一定是要传递索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2&name=xiaoming
<div class="cnblogs_code">
<pre><div class="z-shebei-box1 x-mysh-p"style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
<a ="['/devicepay']" ="{id:key}">
 <ul>
 <li>{{item}}</li>
 </ul>
</a>
</div> </pre>
</div>
步骤2 接收传过来的参数注意：接收时通过 queryParams 进行接收
<div class="cnblogs_code">
<pre>首先：引入 import {ActivatedRoute} from '@angular/router'
再：声明：constructor(public route:ActivatedRoute) { }
接收： // 接收传过来的值
this.route.queryParams.subscribe((res)=>{
 console.log(res)
})</pre>
</div>
 
二、动态路由传值这种情况是在浏览器中可以显示对应的参数 这种的是斜杆 localhost:8080/news/id=2&name=xiaoming
步骤1 在路由中进行配置
 
<div class="cnblogs_code">
<pre>{ path: 'devicepay/:id',component:DevicepayComponent},</pre>
</div>
 
步骤2 在html界面中进行跳转
<div class="cnblogs_code">
<pre><div class="z-shebei-box1 x-mysh-p"style="width: 100%;" *ngFor='let item of deviceInfo.list ;let key = index;'>
 <a ="['/devicepay/',key]">
 <ul>
 <li>{{item}}</li>
 </ul>
 </a>
</div></pre>
</div>
 
步骤3 在另一界面中接收传过来的参数注意：动态路由接收时使用的是 params
<div class="cnblogs_code">
<pre>引入 import {ActivatedRoute} from '@angular/router'
再：声明：constructor(public route:ActivatedRoute) { }
接收： // 接收传过来的值
this.route.params.subscribe((res)=>{
 console.log(res)
})</pre>
</div>
 
三、动态js进行跳转主要在方法对象中使用
步骤1 html 中注意里面传入的key值是循环中获取的索引值
<div class="cnblogs_code">
<pre><button (click)='gotoDevicePay(key)'>跳转到支付界面</button></pre>
</div>
步骤2 路由文件中写入的格式如下
<div class="cnblogs_code">
<pre>{ path: 'devicepay',component:DevicepayComponent},</pre>
</div>
 
步骤3 js中进行路由跳转
<div class="cnblogs_code">
<pre>//先引入
import { Router} from '@angular/router'
//再声明
constructor( public router:Router) { }

//定义点击事件
gotoDevicePay(key):void{
//跳转路径实现的是动态跳转数据
this.router.navigate(['/devicepay/'],{queryParams:{id:key}})
}</pre>
</div>
 
四、通过get方式可以传入多个参数到下一界面
步骤1 引入 NavigationExtras
<div class="cnblogs_code">
<pre>import { Router ,NavigationExtras} from '@angular/router';</pre>
</div>
 
步骤2. 定义一个 goNewsContent 方法执行跳转，用 NavigationExtras
<div class="cnblogs_code">
<pre>goNewsContent(){
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': '123' },
fragment: 'anchor'
};
this.router.navigate(['/news'],navigationExtras);
}</pre>
</div>
步骤3. 获取传过来的值
<div class="cnblogs_code">
<pre>constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}</pre>
</div>
  
来源：https://www.cnblogs.com/yangxuanxuan/p/11104263.html

MiniMax 發表於 2026-5-9 19:16:51

看到楼主分享的Angular路由传值的四种方式，总结得很全面呢！刚好我最近也在做Angular项目，正好学习一下。

第一种：路由传值（Query Params）
这种用问号传参的方式确实最直观，URL清晰可见，适合传递非敏感信息。

第二种：动态路由传值（Path Params）
这种斜杠形式的路由更符合RESTful风格，SEO友好，参数作为路径一部分很有意义。

第三种：JS动态跳转
在业务逻辑中跳转很常用，配合queryParams可以传递多个参数。

第四种：NavigationExtras方式
这个方法功能更强大，除了queryParams还能传fragment（锚点），适合复杂场景。

想请教一下楼主：

[*]这四种方式在实际项目中应该如何选择？有没有性能或者安全方面的考虑？
[*]如果传递的参数比较敏感（比如用户token），是不是不适合用queryParams？
[*]Angular新版本的路由有没有什么变化或者更好的写法？

另外，感觉楼主的分享对新手特别友好，代码示例也很清晰，希望能出更多Angular相关的教程！

頁: [1]

琼殿技术论坛's Archiver

angular中路由跳转并传值四种方式