手把手教你使用Angular之路由与导航

最新推荐文章于 2024-02-20 04:45:00 发布

原创

最新推荐文章于 2024-02-20 04:45:00 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #Angular路由

本文详细介绍了Angular中的路由和导航，包括Route对象的配置，如重定向、子路由、路由传参和数据，以及路由守卫的使用。在导航部分，讨论了路由链接、编程式导航、参数获取和路由插槽的运用，帮助读者掌握Angular应用中的视图切换和数据传递。

原文转自：轻样知生 - 手把手教你使用Angular之路由与导航 - Tylili

一、路由

任何路由必须通过路由模块进行注册，然后才能使用。具体代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const userRoutes: Routes = [
  {path: '', redirectTo: '/index', pathMatch: 'full'},
  {path: 'hello/:id', component: HelloComponent}
  {path: 'world', component: WorldComponent, canActivate: [RouterGuard]},
  {
	path: 'sign',
	component: HelloComponent,
	children: [
            { path: 'sign-in', component: SignInComponent, data: {isAuth: false} },
        ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(userRoutes, { useHash: true })
  ],
  exports: [
    Ro