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

最新推荐文章于 2024-04-28 05:13:17 发布
最新推荐文章于 2024-04-28 05:13:17 发布
阅读量1.1k 收藏
点赞数
分类专栏： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41012753/article/details/85091886
版权

路由传参的三种方式

在查询参数中传递数据

/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，但可能用户已经收藏，这个时候就需要重定向
在这里插入图片描述

宕机高手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular 路由项目构建，路由重定向，路由选中
qq_39962271的博客
02-19 1084
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]——— 路由传参
虽菜但瘾
01-06 553
路由传参 queryParams 在H5页面标签上添加queryParams <a routerLink="/detail" [queryParams]="{id: 1}">detail</a> 在组件中接收参数 import { ActivatedRoute } from '@angular/router'; // 注入依赖类 constructor(private route: ActivatedRoute) { } ngOnInit () { // 变
Angular 4 重定向路由
weixin_33724059的博客
11-24 137
重定向路由： 用户访问一个指定的地址时，将其重新向到另一个指定的地址 （接前面的一节） 配置如下： 之前http://localhost:4200 会进入主页，现在将主页导航改为home，http://localhost:4200也显示404 此时配置重定向，如上图{ path: '', redirectTo : '/home', pathMatch:...
angular路由重定向
llkk
08-10 3804
路由重定向 路由配置文件中加入以下代码 { path:'str', redirectTo:'/home', pathMatch:'full' }, path为str表示当路由到’/str’时路由地址变为‘/home’ pathMatch表示当完全写入‘/str’时路由才重新定向不可少写漏写...
【Angular4学习】--路由重定向
十年磨一剑，沉淀……
01-14 1671
解决的问题 当我们变更网站地址了之后，如果用户没有收到变更后的新网址，依旧输入了旧网址能访问我们新发布的网站吗？ Angular的路由重定向可以帮你实现。 什么是路由重定向？ 在用户访问一个特定的地址时，将其重定向到另一个指定的地址。 示例 //当用户访问前者时，路由会自动跳转至后者所指向的页面 www.aaa.com ==> www.aaa.com/products www.
Angular--路由概述 配置路由 路由重定向 路由选中
天行健 君子以自强不息，地势坤 君子以厚德载物。
04-14 887
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.
路由重定向/路由传参
CIA的博客
11-02 860
重定向 { path: '/', //默认页 redirect: '/home' //配置型跳转 }, 路由传参：params 传 1.动态路由匹配（路由配置里写） { name:"user", path: '/user/:id', component: User } //id：相当于声明了变量 2.跳转时传参 1)、跳转时，使用字符串 //声明式 <router-link to="/user/01001">用户01001的信息</router-link> //编
Angular 5.x 学习笔记之Router(路由)应用
12-12
Angular APP 视图之间的跳转，依赖于 Router （路由），这一章，我们来讲述 Router 的应用 实例讲解 运行结果如下。 设置了3个导航栏， Home、 About、Dashboard。 点击不同的导航栏，跳转到相应的页面： 创建3个 ...
Angular2学习笔记——详解路由器模型（Router）
11-29
本篇学习笔记将深入探讨Angular2的路由器模型及其工作流程。 首先，我们要理解Angular2的组件化思想。在Angular2中，应用是由一系列组件构成的树状结构，组件可以是通用的，如list或table，也可以是特定业务场景下...
Angular权威教程之路由篇_angular 路由(1)
最新发布
2401_84447297的博客
04-28 858
prefix | 默认情况下，路由器从左方检查URL元素以查看URL是否与给定路径匹配，并在匹配时停止。例如，“ / team / 11 / user”与“ team /：id”匹配。| full | 路径匹配策略“完整”与整个URL匹配。重定向空路径路由时，执行此操作很重要。否则，因为空路径是任何URL的前缀，所以路由器即使在导航到重定向目标时也将应用重定向，从而造成无限循环。
Angular中路由传值（get传值、动态路由）以及通过js跳转路由（2)
03-07
Angular中路由传值（get传值、动态路由）以及通过js跳转路由（2）
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
08-27
主要介绍了Angular4.x通过路由守卫进行路由重定向，实现根据条件跳转到相应的页面,这个功能在网上商城项目上经常会用到，下面小编给大家带来了解决方法一起看看吧
Angular中的路由 路由概述 配置路由 路由重定向 路由选中 默认路由
03-06
Angular中的路由 路由概述 配置路由 路由重定向 路由选中 默认路由
【6】 angular 路由基础知识_在路由时传递数据_重定向路由_子路由_辅助路由_路由守卫
丿灬安之若死
09-27 442
  路由基础知识   路由相关对象介绍     新建一个项目 ng new router --routing 并使用webstrom 打开  发现--routing 参数创建后 会多出一个文件app-routing.module.ts 就是当前应用的路径配置 内容如下 import { NgModule } from '@angular/core'; import { ...
angular路由为空重定向到指定路由
weixin_30438813的博客
03-19 321
{ path: '', redirectTo: 'home', pathMatch: 'full' } 转载于:https://www.cnblogs.com/sooooogiotto/p/10556776.html
angular2学习遇到的注意点
weixin_34403693的博客
02-23 132
关于angular2里面使用了templateUrl的时候设置moduleId其实是用于解析样式表和模板的相对路径，如文档中所述。 包含组件的模块的模块标识。需要能够解析模板和样式的相对网址。在Dart中，这可以自动确定，不需要设置。在CommonJS中，这总是可以设置为module.id。 ref（old）：https://angular.io/docs/js/latest/ap...
Angular2-路由重定向的办法
weixin_30561425的博客
07-26 165
　　使用Angular2开发，常会遇到路由重定向的应用场景。 　　路由重定向的配置办法是这样的： {path:'要定向的路径', redirectTo:'要定向到的目标路由'} 　　比如某组件有个路由插件，并且一进入该组件就想要路由插件加载出内容，我们的路由配置可能这么写： routes: Routes = [ { path:'', component:'P...
angular路由传递参数_Angular路由参数传递
weixin_42396502的博客
01-16 534
一、路由时传递参数的方式1、在查询参数中传递数据，如//前台页面商品详情//后台页面获取参数export class ProductComponent implements OnInit {private productId: number;constructor(private routeInfo: ActivatedRoute) { }ngOnInit() {this.productId = ...
Angular4 第三章（中） 重定向路由，子路由，辅助路由
qq_21987433的博客
11-10 5683
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 4.x 路由配置与使用教程
"Angular 4.x 路由快速入门学习" 在Angular应用程序中，路由扮演着至关重要的角色，它负责加载与用户请求的特定路由相匹配的组件，并且能够根据路由传递数据，实现不同页面的动态显示。本文将深入探讨Angular 4.x中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值