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


Posted in Javascript onNovember 19, 2019

本文受众是 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 的页面时就达到了本文的第一个图片的效果,右侧显示业务逻辑组件的页面。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
基于node实现websocket协议
Apr 25 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 #Javascript
vue的三种图片引入方式代码实例
Nov 19 #Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 #Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 #Javascript
VUEX-action可以修改state吗
Nov 19 #Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
You might like
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
记帐员岗位责任制
2014/02/08 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
防汛通知
2015/04/25 职场文书
总经理致辞
2015/07/29 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
nginx优化的六点方法
2021/03/31 Servers
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android