angular 路由第二篇

hightopo 发布于2019-08-22 13:52 / 2011人阅读

摘要：重定向关键词表示地址表示匹配原则完全一致前缀一致。路由守卫关键词用法新建一个守卫依赖注入到配置路由的中调用守卫可以配置多个，所以是一个数组。

1.重定向

关键词 redirectTo,pathMath;
redirectTo 表示 地址,
pathMath 表示 匹配原则 （full:完全一致,prefix:前缀一致）。
用法:{path:"",redirectTo:"/page1",pathMatch:"full"};

2.子路由

关键词 children
使用方法:
{path:"page1",children:[{path:"page3",component:Page3Component}]}

3辅助路由

关键词 outlet
用法 
     
     
     
     {path:"page1",component:Page1Component,outlet:"test1"},
     {path:"page2",component:Page1Component,outlet:"test2"};
从代码字面上来看，就是一下传进多个路由的信息，辅助理由的组件只能在自己outlet的属性的插座里显示，辅助路由也只能显示设置outlet属性为自身的组件。

4.路由守卫

关键词 canActivate;
用法：
1.新建一个守卫
import{ CanActivate } from "@angular/router";
export Guard class implements CanActivate {
    canActivate(){
    return boolean;
    }
}
2.依赖注入到配置路由的ts中
import { Guard } from ....;
@ngModules{
.....,
providers:[Guard]
};
3.调用
{path:"page1",component:Page1Component,canAcvitate:[Guard]}

守卫可以配置多个，所以是一个数组。

GPU云服务器云服务器第二篇 phpcms从第二篇第十二篇 Angular

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92548.html

@angular/router 源码分析之注册路由

摘要：模块主要解决程序路由状态改变和懒加载模块问题。本文主要解释程序启动后，是如何注册开发者定义的路由集合的，和实例化对象的。第六个重要的对象就是，提供了初始导航功能。 @angular/router 模块主要解决程序路由状态改变和懒加载模块问题。比如，程序从路由状态 state1: /advisors/1/households/1 转变为路由状态 state2: /advisors/1/...

hidogs 2019-08-23 10:36 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
使用Angular4动画为页面添彩

摘要：使用组件将根据视口放置，并滑过页面。这意味着我们不能使用状态来对路由组件进行样式，因为这样可以将样式应用于父结点我们的示例中的主元素，而不是路由组件。原文：Angular — Supercharge your Router transitions using new animation features (v4.3+) 首先我们看一下效果展示的demo Basic Variation...

jay_tian 2019-08-20 18:24 评论0 收藏0