华山资源网

Angular 多级路由实现登录页面跳转(小白教程)
网络编程 2024/11/18 佚名
3 1

本文受众是 Angular 初学者，没有多级路由使用经验，不知道登录页面与主页跳转的实现逻辑，相反，看到这里你就可以结束了，不要浪费时间。下面来看看小白对于登录页面的理解：

Angular 多级路由实现登录页面跳转(小白教程)

上图中左边是导航菜单栏，右边的空白区域是 <router-outlet> 所在区域，即所有实现业务逻辑的组件都在这里显示 - 点击左边导航栏的项目右侧B区域就替换为对应的页面，那么问题来了，登录页面要怎么做？

多级路由实现图

Angular 多级路由实现登录页面跳转(小白教程)

图有点大，看不清楚的放大点看吧。看了这个图相信一部分人已经懂了实现原理了。如果还是不懂，来看下面的文字讲解。

实现原理讲解

本文案例以 Angular + ng-zorro-antd 来讲解，如果使用了别的UI套件也没关系，原理都是一样的

  • 使用命令 ng new logindemo 创建项目
  • 在命令行界面使用 cd 切换当前路径为上面创建的项目的根目录下
  • 使用命令 ng add ng-zorro-antd 向项目中添加UI套件
  • 此时运行起来后大致就是本文的第一个图片的显示效果：左边是导航菜单，右边是变换显示业务组件的区域
  • 那么小白走到这里就被误导了，产生了本文初的疑惑，下面开始来解扣了。

项目创建好了，下面介绍改造项目的步骤：

注释掉文件 app.component.html 中的全部代码，并且添加一行：<router-outlet></router-outlet>

创建布局组件 layout ，将文件 app.component.html 中被注释的代码拷贝来，那么本组件的效果就是本文的第一个图片的布局效果了。拷贝来的代码中自带了路由插槽 <router-outlet></router-outlet> 那么到本页面中的路由插槽实际就是二级路由了。二级路由的代码如下：

const routes: Routes = [
 { 
  path:'',component:LayoutComponent,canActivate:[LayoutGuard],
  children:[
   { path: 'dbManager',loadChildren: () => 
    import('../dbmanager/dbmanager.module').then(m => m.DbmanagerModule) },

   { path: 'generateTree',loadChildren: () => 
    import('../gentree/gentree.module').then(m => m.GentreeModule) }
  ] 
 }
];

本组件的超链接中路径写法：<a routerLink="dbManager" >数据库管理器</a>，之前创建项目时的默认写法是：<a routerLink="/dbManager" >数据库管理器</a>，即只是去掉了 dbManager 前面的斜线。

那么在文件 app.component.ts 组件关联的路由文件 app-routing.module.ts 中的路由代码如下：

const routes: Routes = [
 { path: '', pathMatch: 'full', redirectTo: '/layout' },
 { path: 'login', loadChildren: () => 
  import('./pages/login/login.module').then(m => m.LoginModule) },
 { path: 'layout',loadChildren: () => 
  import('./pages/layout/layout.module').then(m => m.LayoutModule)}
];

这里的路由设置表示，当访问项目的空路径 localhost:4200 时会自动导航到组件 layout ，又由于该组件有路由守卫，如果没有登录那么会被转发到登录组件 login ，这个路由守卫是写在组件 layout 中的路由文件中的。当正常登录状态下打开组件 layout 的页面时就达到了本文的第一个图片的效果，右侧显示业务逻辑组件的页面。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com