angularjs简单的路由跳转

最新推荐文章于 2021-10-13 11:59:06 发布

原创最新推荐文章于 2021-10-13 11:59:06 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

augular的学习专栏收录该内容

7 篇文章

订阅专栏

这篇博客详细介绍了AngularJS中的路由配置，包括如何创建路由、配置`router-outlet`来显示动态加载的路由。同时，重点讲解了路由跳转传值的方法，通过get方式传递参数，并给出了动态路由配置及接收传值的步骤，对于理解和应用AngularJS路由非常有帮助。

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

创建路由：

首先创建一个带路由的项目
创建需要的组件
在根模块里引入组件（用命令创建的组件会自动引入到根模块）

配置路由:

 import {HomeComponent } from './components/home/home.component';  //在路由模块里引入组件   
 {path: 'home',component:HomeComponent},  //并在routes里配置动态加载路  
 这个路由是放在<router-outlet></router-outlet>里显示的

此时可以在地址栏输入地址可现实对应的页面表示路由配置成功

配置router-outlet显示动态加载路由

页面会刷新     <a href= '/news'>新闻</a>  
页面不刷新     <a [routerLink]="[ '/news' ]"></a> 
路由默认选中   <a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>

匹配不到路由时加载的组件或者跳转的路由

{path: '**',redirectTo: 'home'}

路由跳转传值

get传值:

1、跳转

 <li *ngFor="let item of list;let key=index">
      <a [routerLink]="['/newscomponent']" [queryParams]="{aid:key}">
         {{key}}----{{item}}
      </a>
  </li>

2、接收

引入（在需要跳转的.component.ts页面引入）

import { ActivatedRoute } from '@angular/router';

声明

  constructor(public route:ActivatedRoute) { }

获取get传值

ngOnInit() {
          //console.log(this.route.queryParams);
         this.route.queryParams.subscribe((data)=>{
         console.log(data.aid);
         })
       }

动态路由
1、配置动态路由
需要在路由里配置（在path路径后添加/:aid）
2、跳转

<li *ngFor="let item of list;let key=index">
            <a [routerLink]="['/newscomponent',key]">
                {{key}}----{{item}}
            </a>
         </li>

3、接收
引入

import { ActivatedRoute } from '@angular/router';

 声明

constructor(public route:ActivatedRoute) { }

 获取

ngOnInit() {
  this.route.params.subscribe((data)=>{
    console.log(data);
    })
 }

动态路由的js跳转
1、在需要跳转的HTML页面设置一个click事件

 <button (click)='goViewContent()'>js路由跳转</button>

2、引入（在需要跳转的.component.ts页面引入）

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

3、声明

constructor(public router:Router) { }

4、设置事件函数

goViewContent(){
    this.router.navigate(['/viewcontent','123456'])
 }
 //（123456是静态传值，需要在配置路由时path路径后添加/:pid）

get传值的js跳转

1、引入NavigationExtras

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

2、声明

constructor(public router:Router) { }

3、定义一个方法执行跳转，用NavigationExtras配置传参

goNews(){
      let queryParams:NavigationExtras={
         queryParams:{'aid':12}
      }
     this.router.navigate(['/news'],queryParams);
   }
        //注意：也可以不引入NavigationExtras，但是不是标准写法