1.配置动态路由

  1. const routes: Routes = [
  2. {path: 'home', component: HomeComponent},
  3. {path: 'news', component: NewsComponent},
  4. {path: 'newscontent/:id', component: NewscontentComponent},
  5. {
  6. path: '',
  7. redirectTo: '/home',
  8. pathMatch: 'full'
  9. } ];

2.跳转传值

  1. <a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
    <a routerLink="/newscontent/{{aid}}">跳转到详情</a>

3.获取动态路由的值

  1. import { ActivatedRoute} from '@angular/router';
  1. constructor( private route: ActivatedRoute) { }
  1. ngOnInit() {
  2. console.log(this.route.params);
  3. this.route.params.subscribe(data=>this.id=data.id);
  4. }

动态路由的 js 跳转

1. 引入

  1. import { Router } from '@angular/router';

2.初始化

  1. xport class HomeComponent implements OnInit { constructor(private router: Router) {
  2. }
  3. ngOnInit() {
  4. }
  5. goNews(){
  6. // this.router.navigate(['/news', hero.id]);
  7. this.router.navigate(['/news']);
  8. }
  9. }

3.路由跳转

  1. this.router.navigate(['/news', hero.id]);

路由 get 传值 js 跳转

1. 引入 NavigationExtras

  1. import { Router ,NavigationExtras} from '@angular/router';

2.定义一个 goNewsContent 方法执行跳转,用 NavigationExtras 配置传参。

  1. goNewsContent(){
  2. let navigationExtras: NavigationExtras = {
  3. queryParams: { 'session_id': '123' },
  4. fragment: 'anchor'
  5. };
  6. this.router.navigate(['/news'],navigationExtras);
  7. }

3.获取 get 传值

  1. constructor(private route: ActivatedRoute) {
  2. console.log(this.route.queryParams);
  3. }

angular中的动态路由的更多相关文章

  1. Vue.js 中的动态路由

    静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...

  2. Angular中ui-router实现路由嵌套案例

    学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态  ht ...

  3. ASP.NET Core 3.0中使用动态控制器路由

    原文:Dynamic controller routing in ASP.NET Core 3.0 作者:Filip W 译文:https://www.cnblogs.com/lwqlun/p/114 ...

  4. VueRouter爬坑第二篇-动态路由

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  5. Flask(5)- 动态路由

    前言 前面几篇文章讲的路由路径(rule)都是固定的,就是一个路径和一个视图函数绑定,当访问这条路径时会触发相应的处理函数 这样无法处理复杂的情况,比如常见的一个课程分类下有很多个课程,那么他们的 p ...

  6. HCNA Routing&Switching之动态路由基本概念

    前文我们了解了静态路由的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14965433.html:今天我们来聊一聊动态路由相关概念: 首先我们要清楚什 ...

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

    一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...

  8. Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...

  9. YbSoftwareFactory 代码生成插件【二十四】:MVC中实现动态自定义路由

    上一篇介绍了 公文流转系统 的实现,本篇介绍下MVC下动态自定义路由的实现. 在典型的CMS系统中,通常需要为某个栏目指定个友链地址,通过指定友链地址,该栏目的地址更人性化.方便记忆,也有利用于搜索引 ...

随机推荐

  1. CUDA中确定你显卡的thread和block数

    CUDA中确定你显卡的thread和block数 在进行并行计算时, 你的显卡所支持创建的thread数与block数是有限制的, 因此, 需要自己提前确定够用, 再进行计算, 否则, 你需要改进你的 ...

  2. 模板引擎-vue中的模板如何被解析,指令如何处理

    模板是什么 <div id='app'> <div> <input v-model="title"/> <button v-on:clic ...

  3. 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 ...

  4. XAMPP启动Apache服务时启动失败

    9:48:49 [Apache] Apache Service detected with wrong path 9:48:49 [Apache] Change XAMPP Apache and Co ...

  5. test20181102 空间复杂度 和 test20181030 数独

    空间复杂度 考场做法 前有时间复杂度,后有空间复杂度. 但是这题不会有CE情况,所以较为好写. 就用map存复杂度,单层循环就搞定了. 至于判断维度的方法,我是用快读从字符串中读入. 然后不管常数,把 ...

  6. group_concat 排序并取前三个

    substring_index(group_concat(distinct num order by num desc),',',3)

  7. [Sdoi2013] [bzoj 3198] spring (hash+容斥原理)

    题目描述 给出nnn个666维坐标,求有多少对点对满足恰好mmm个位置相等 1<=n<=1051<=n<=10^51<=n<=105 0<=k<=60& ...

  8. Java多线程下载初试

    一.服务端/客户端代码的实现 服务端配置config @ConfigurationProperties("storage") public class StoragePropert ...

  9. 加入redis缓存的 优 缺 点以及解决方案

    redis(支持十万级的并发) 优点:         1.减轻数据库压力         2.增强系统的并发量         3.提高用户体验 缺点:         1.数据不一致(延迟更新) ...

  10. html与HTML5的区别

    文档的类型声明不同 html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.or ...