526互联

Angular如何创建路由以及如何配置路由导航

发布时间 2023-08-14 13:23:49作者: 红豆是个笨小孩

废话不多说直接进入正题，首先要创建好项目。

第一步：安装Angular路由

输入以下指令

npm install @angular/router

第二部：通过指令创建Angular路由守卫

ng g guard guards/auth(自定义名字)

第二部：在module文件里面导入①路由导航组件②其他类组件，之后再

NgModule({
  declarations: [
    AppComponent,
     //在这里导入其他类组件
  ],

然后配置路由，在imports中导入 RouterModule.forRoot(路由变量名）

const routes: Routes = [
  { path: 'home', component: HomeComponent,canActivate:[loginGuradsGuard]  },
  // 添加更多路由...
 
];

后面关于路由条件的设定要在CanActivate中设置

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

export const loginGuradsGuard: CanActivateFn = (route, state) => {
  console.log("启动");
  return false;
};

以上