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

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

第一步:安装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;
};

以上

posted @ 2023-08-14 13:20  しゅおく  阅读(22)  评论(0编辑  收藏  举报