angular中的动态路由
1.配置动态路由
- const routes: Routes = [
- {path: 'home', component: HomeComponent},
- {path: 'news', component: NewsComponent},
- {path: 'newscontent/:id', component: NewscontentComponent},
- {
- path: '',
- redirectTo: '/home',
- pathMatch: 'full'
- } ];
2.跳转传值
- <a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>
3.获取动态路由的值
- import { ActivatedRoute} from '@angular/router';
- constructor( private route: ActivatedRoute) { }
- ngOnInit() {
- console.log(this.route.params);
- this.route.params.subscribe(data=>this.id=data.id);
- }
动态路由的 js 跳转
1. 引入
- import { Router } from '@angular/router';
2.初始化
- xport class HomeComponent implements OnInit { constructor(private router: Router) {
- }
- ngOnInit() {
- }
- goNews(){
- // this.router.navigate(['/news', hero.id]);
- this.router.navigate(['/news']);
- }
- }
3.路由跳转
- this.router.navigate(['/news', hero.id]);
路由 get 传值 js 跳转
1. 引入 NavigationExtras
- import { Router ,NavigationExtras} from '@angular/router';
2.定义一个 goNewsContent 方法执行跳转,用 NavigationExtras 配置传参。
- goNewsContent(){
- let navigationExtras: NavigationExtras = {
- queryParams: { 'session_id': '123' },
- fragment: 'anchor'
- };
- this.router.navigate(['/news'],navigationExtras);
- }
3.获取 get 传值
- constructor(private route: ActivatedRoute) {
- console.log(this.route.queryParams);
- }
angular中的动态路由的更多相关文章
- Vue.js 中的动态路由
静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...
- Angular中ui-router实现路由嵌套案例
学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态 ht ...
- ASP.NET Core 3.0中使用动态控制器路由
原文:Dynamic controller routing in ASP.NET Core 3.0 作者:Filip W 译文:https://www.cnblogs.com/lwqlun/p/114 ...
- VueRouter爬坑第二篇-动态路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- Flask(5)- 动态路由
前言 前面几篇文章讲的路由路径(rule)都是固定的,就是一个路径和一个视图函数绑定,当访问这条路径时会触发相应的处理函数 这样无法处理复杂的情况,比如常见的一个课程分类下有很多个课程,那么他们的 p ...
- HCNA Routing&Switching之动态路由基本概念
前文我们了解了静态路由的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14965433.html:今天我们来聊一聊动态路由相关概念: 首先我们要清楚什 ...
- angular中路由跳转并传值四种方式
一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
- YbSoftwareFactory 代码生成插件【二十四】:MVC中实现动态自定义路由
上一篇介绍了 公文流转系统 的实现,本篇介绍下MVC下动态自定义路由的实现. 在典型的CMS系统中,通常需要为某个栏目指定个友链地址,通过指定友链地址,该栏目的地址更人性化.方便记忆,也有利用于搜索引 ...
随机推荐
- CUDA中确定你显卡的thread和block数
CUDA中确定你显卡的thread和block数 在进行并行计算时, 你的显卡所支持创建的thread数与block数是有限制的, 因此, 需要自己提前确定够用, 再进行计算, 否则, 你需要改进你的 ...
- 模板引擎-vue中的模板如何被解析,指令如何处理
模板是什么 <div id='app'> <div> <input v-model="title"/> <button v-on:clic ...
- Poj-3286- How many 0's? - 【基础数位DP】
How many 0's? Description A Benedict monk No.16 writes down the decimal representations of all natur ...
- XAMPP启动Apache服务时启动失败
9:48:49 [Apache] Apache Service detected with wrong path 9:48:49 [Apache] Change XAMPP Apache and Co ...
- test20181102 空间复杂度 和 test20181030 数独
空间复杂度 考场做法 前有时间复杂度,后有空间复杂度. 但是这题不会有CE情况,所以较为好写. 就用map存复杂度,单层循环就搞定了. 至于判断维度的方法,我是用快读从字符串中读入. 然后不管常数,把 ...
- group_concat 排序并取前三个
substring_index(group_concat(distinct num order by num desc),',',3)
- [Sdoi2013] [bzoj 3198] spring (hash+容斥原理)
题目描述 给出nnn个666维坐标,求有多少对点对满足恰好mmm个位置相等 1<=n<=1051<=n<=10^51<=n<=105 0<=k<=60& ...
- Java多线程下载初试
一.服务端/客户端代码的实现 服务端配置config @ConfigurationProperties("storage") public class StoragePropert ...
- 加入redis缓存的 优 缺 点以及解决方案
redis(支持十万级的并发) 优点: 1.减轻数据库压力 2.增强系统的并发量 3.提高用户体验 缺点: 1.数据不一致(延迟更新) ...
- html与HTML5的区别
文档的类型声明不同 html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.or ...