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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 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
一个取得文件扩展名的函数
2006/10/09 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
javascript基本类型详解
2014/11/28 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
详解React 条件渲染
2020/07/08 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python 实现UTC时间加减的方法
2018/12/31 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python3实现弹弹球小游戏
2019/11/25 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
pip install命令安装扩展库整理
2021/03/02 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2014年售票员工作总结
2014/11/19 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书