angular-cli中路由的跳转

最新推荐文章于 2024-12-13 10:52:37 发布

原创最新推荐文章于 2024-12-13 10:52:37 发布 · 955 阅读

0 ·

CC 4.0 BY-SA版权

个人总结同时被 2 个专栏收录

122 篇文章

订阅专栏

angular

10 篇文章

订阅专栏

本文介绍了在Angular CLI项目中实现路由跳转的方法。包括使用HTML `routerLink`属性进行页面跳转，以及在JS代码内部编程式导航，详细阐述了`this.router.navigateByUrl()`和`this.router.navigate(['/xxx'])`的用法。

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

1、a标签跳转

在html标签内使用routerLink跳转，使用方式如下：

<a routerLink="/my">去my</a>

2、编程式导航-JS代码内部跳转

实际项目中，很多时候都是通过在JS代码内部进行导航的跳转，使用有两种方式，如下

this.router.navigateByUrl('xxx')

this.router.navigate(['/xxx'])

具体的简单用法：

（1）在login.component.html文件里先编写一个按钮，在按钮上绑定change( )方法。

<button (click)="change()">点击啊</button>

（2）在login.component.ts文件里引入Router，加入change方法，并用this.router.navigateByUrl('xxx')或者this.router.navigate(['/xxx'])导航到首页

import { Component, OnInit } from '@angular/core'
// 引入 Router
import {
  ActivatedRoute,
  Router,
  ActivatedRouteSnapshot,
  RouterState,
  RouterStateSnapshot
} from '@angular/router'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
  // 注册 Router
  constructor(public router: Router) {}

  ngOnInit() {}

  change() {
    // 利用js进行跳转
    this.router.navigate(['/my'])
    // this.router.navigateByUrl('my')
    
  }
}