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 基础知识 被自己遗忘的
Oct 15 Javascript
js对象的比较
Feb 26 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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
制作美丽的拉花
2021/03/03 冲泡冲煮
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
合作意向书范本
2014/03/31 职场文书
导师就业推荐信范文
2014/05/22 职场文书
新闻学专业求职信
2014/07/28 职场文书
安全生产标语大全
2014/10/06 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
Golang解析JSON对象
2022/04/30 Golang
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis