angular路由

angular路由

官网地址
我们的框架一般是通过cli构建的如果不是那么就单独引入路由模块 官网有教程
下面我们说路由的使用

引入AppRoutingModule

把 AppRoutingModule 导入 AppModule 并把它添加到 imports 数组中。
Angular CLI 会为你执行这一步骤。但是，如果要手动创建应用或使用现存的非 CLI 应用，请验证导入和配置是否正确。下面是使用 --routing 标志生成的默认 AppModule。

import {
    AppRoutingModule } from './app-routing.module'; // CLI imports 
@NgModule({
   
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
})
export class AppModule {
    }

把 RouterModule 和 Routes 导入到你的路由模块中

Angular CLI 会自动执行这一步骤。CLI 还为你的路由设置了 Routes 数组，并为 @NgModule() 配置了 imports 和 exports 数组，并在在 Routes 数组中定义你的路由，
这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 path 定义了该路由的 URL 路径。第二个属性 component 定义了要让 Angular 用作相应路径的组件。

import {
    NgModule } from '@angular/core';
import {
    Routes, RouterModule } from '@angular/router'; // CLI imports router
//在这里放入我们的路由
const routes: Routes