Angular学习笔记-路由传参及重定向路由

最新推荐文章于 2021-04-14 13:01:31 发布
最新推荐文章于 2021-04-14 13:01:31 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41012753/article/details/85091886
本文深入讲解了三种路由传参方式：查询参数、路由路径及路由配置。通过具体示例介绍了如何在不同场景下使用这些传参方法，以及如何实现重定向路由。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

路由传参的三种方式

在查询参数中传递数据

/product?id=1&name=2 => ActivatedRoute.queryParams[id]

在路由路径中传递数据

{path:/product/:id} => /product/1  => ActivatedRoute.params[id]

在路由配置中传递数据

{path:/product,component:ProductComponent,data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

在查询参数中传递数据

step 1 传一个参数
在这里插入图片描述
step 接受参数
在这里插入图片描述

在路由路径中传递数据

第一步 修改路由中的path属性
在这里插入图片描述
第二步 修改传参的值，按照路由的格式
在这里插入图片描述
第三步 从url中取参数

在这里插入图片描述

在路由配置中传递数据

在这里插入图片描述

重定向路由

在用户访问一个特定的地址时，将其重定向另一个指定的地址
比如当用户访问你的网址时www.xusidong.top ，你可以立即路由到一个商品列表的组件上去
在这里插入图片描述

或者 你设置一个路由是x，然后你想把路由改为y，但可能用户已经收藏，这个时候就需要重定向
在这里插入图片描述

angular 路由项目构建，路由重定向，路由选中
dave的技术成长之路
02-19 1170
angular 路由 一、angular 路由项目构建 进入cmd窗口,将当前路径设置为需要添加angular项目的路径 新建一个带有路由的项目，项目名为：routerDemo 使用VScode 打开新创建的项目。 二、angular 配置路由，路由重定向，路由选中 1、新建两个组件，home;news,终端输入： ng g component components/home ng g component components/news 2、终端输入 ng serve --open,运行此项目。 3
掌握 Angular.js 前端路由，打造流畅单页应用
最新发布
小白菜的博客
05-16 930
本文旨在为前端开发者提供全面的Angular.js路由指南，涵盖从基础概念到高级特性的所有内容。我们将重点讨论Angular.js 1.x版本的路由系统，包括ngRoute和UI-Router两种主流解决方案。文章首先介绍路由的基本概念，然后深入Angular.js路由的实现原理，接着通过实际案例展示路由配置和高级用法，最后探讨性能优化和未来发展趋势。: 单页应用，通过动态重写当前页面来与用户交互，而非从服务器加载全新页面路由(Routing): 管理应用不同视图之间导航的机制视图(View)
Angular 4 重定向路由
weixin_33724059的博客
11-24 170
重定向路由： 用户访问一个指定的地址时，将其重新向到另一个指定的地址 （接前面的一节） 配置如下： 之前http://localhost:4200 会进入主页，现在将主页导航改为home，http://localhost:4200也显示404 此时配置重定向，如上图{ path: '', redirectTo : '/home', pathMatch:...
angular路由重定向
llkk
08-10 3871
路由重定向 路由配置文件中加入以下代码 { path:'str', redirectTo:'/home', pathMatch:'full' }, path为str表示当路由到’/str’时路由地址变为‘/home’ pathMatch表示当完全写入‘/str’时路由才重新定向不可少写漏写...
【Angular4学习】--路由重定向
十年磨一剑，沉淀……
01-14 1721
解决的问题 当我们变更网站地址了之后，如果用户没有收到变更后的新网址，依旧输入了旧网址能访问我们新发布的网站吗？ Angular的路由重定向可以帮你实现。 什么是路由重定向？ 在用户访问一个特定的地址时，将其重定向到另一个指定的地址。 示例 //当用户访问前者时，路由会自动跳转至后者所指向的页面 www.aaa.com ==> www.aaa.com/products www.
Angular--路由概述 配置路由 路由重定向 路由选中
天行健 君子以自强不息，地势坤 君子以厚德载物。
04-14 932
1. Angular–路由概述 配置路由 路由重定向 路由选中 1.1 准备工作 1.1.1 Angular创建一个默认带路由的项目 ng new angularDemo08 1.1.2 创建3个待会测试用的组件 ng g component compnents/home ng g component compnents/news ng g component compnents/newsContent 创建结果: 1.2 找到app-routing.module.ts 配置路由 1.2.
Angular 5.x 学习笔记之Router(路由)应用
12-12
Angular APP 视图之间的跳转，依赖于 Router （路由），这一章，我们来讲述 Router 的应用 实例讲解 运行结果如下。 设置了3个导航栏， Home、 About、Dashboard。 点击不同的导航栏，跳转到相应的页面： 创建3个 ...
Angular2学习笔记——详解路由器模型（Router）
11-29
本篇学习笔记将深入探讨Angular2的路由器模型及其工作流程。 首先，我们要理解Angular2的组件化思想。在Angular2中，应用是由一系列组件构成的树状结构，组件可以是通用的，如list或table，也可以是特定业务场景下...
【6】 angular 路由基础知识_在路由时传递数据_重定向路由_子路由_辅助路由_路由守卫
丿灬安之若死
09-27 488
  路由基础知识   路由相关对象介绍     新建一个项目 ng new router --routing 并使用webstrom 打开  发现--routing 参数创建后 会多出一个文件app-routing.module.ts 就是当前应用的路径配置 内容如下 import { NgModule } from '@angular/core'; import { ...
angular路由为空重定向到指定路由
weixin_30438813的博客
03-19 358
{ path: '', redirectTo: 'home', pathMatch: 'full' } 转载于:https://www.cnblogs.com/sooooogiotto/p/10556776.html
Angular中路由传值（get传值、动态路由）以及通过js跳转路由（2)
03-07
Angular中路由传值（get传值、动态路由）以及通过js跳转路由（2）
angular2学习遇到的注意点
weixin_34403693的博客
02-23 160
关于angular2里面使用了templateUrl的时候设置moduleId其实是用于解析样式表和模板的相对路径，如文档中所述。 包含组件的模块的模块标识。需要能够解析模板和样式的相对网址。在Dart中，这可以自动确定，不需要设置。在CommonJS中，这总是可以设置为module.id。 ref（old）：https://angular.io/docs/js/latest/ap...
Angular2-路由重定向的办法
weixin_30561425的博客
07-26 196
　　使用Angular2开发，常会遇到路由重定向的应用场景。 　　路由重定向的配置办法是这样的： {path:'要定向的路径', redirectTo:'要定向到的目标路由'} 　　比如某组件有个路由插件，并且一进入该组件就想要路由插件加载出内容，我们的路由配置可能这么写： routes: Routes = [ { path:'', component:'P...
angular路由传递参数_Angular路由参数传递
weixin_42396502的博客
01-16 580
一、路由时传递参数的方式1、在查询参数中传递数据，如//前台页面商品详情//后台页面获取参数export class ProductComponent implements OnInit {private productId: number;constructor(private routeInfo: ActivatedRoute) { }ngOnInit() {this.productId = ...
Angular4 第三章（中） 重定向路由，子路由，辅助路由
qq_21987433的博客
11-10 5735
1.重定向路由:在用户访问一个特定的地址时，将其重定向到另一个指定的地址   eg :  www.aaa.com  =>   www.aaa.com/products           www.aaa.com/x=>www.aaa.com/y const routes: Routes = [ {path: '', redirectTo: '/home', pa
angular HttpClient 拦截器 拦截401请求重定向
qq_37124515的博客
08-26 1389
参考地址: https://semlinker.com/ng-http-interceptor/ 实现(request.service) import { Injectable } from "@angular/core"; import { Observable, of, throwError } from "rxjs"; import { catchError, map, tap } from "rxjs/operators"; import { HttpHeaders, HttpCli..
4、Angular-Ui Router URL路由(完结篇)
写代码炒股的算命先生
07-21 7599
Most states in your application will probably have a url associated with them. URL Routing was not an afterthought to the state mechanics, but was figured into the design from the beginning (all while
angular跳转指定页面,从链接Angular 6重定向另一个页面的指定选项卡中
weixin_33983809的博客
01-13 223
I'm working with Angular 6.2 & Angular Material.I have a page with mat tabs (3 tabs).It is possible to redirect in this page but with the 3rd tab active? From clicking a link in the navbar.It look...
angular知识点--路由（一）
奇怪的人类
09-18 231
路由相关对象介绍： 对象名称 简介 Routes 配置路由，保存着哪个URL对应展示哪个组件 RouterOutlet 在html中标记路由内容呈现位置的占位符指令。 Router 负责在运行时执行路由的对象，可以通过调用其navigate RouterLink 在html声明路由导航用的指令。 ActivatedRoute 当前激活的路由对象，保存着当前路由信息，如路由地址，路由参数等。 /根路由 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值