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 prototype对象的属性说明
Mar 13 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
node.js中express-session配置项详解
May 31 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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设计模式 Interpreter(解释器模式)
2011/06/26 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
如何基于python测量代码运行时间
2019/12/25 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
教师岗位职责
2015/02/03 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
九九重阳节致辞
2015/07/31 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python