angular5学习笔记（deep in 路由）
最近接手了一个angular5的项目。项目本身是由不同的人开发的，所有代码结构风格本身就有很大不同，加上本身接触angular5也不久，之前都是使用1，所有自身压力还是很大的。
接手前几天当然是熟悉代码了。其中就有用到路由的几个延伸功能，比如子路由，路由延迟加载。
子路由children：
话不多说，先上代码
{path: '',component: QuestionsComponent,canActivate:[AuthGuard],children: [{path: '', redirectTo: 'testMain/disk', pathMatch: 'full'},{path: 'testMain/:current', component: TestMainComponent},{path: 'addQuestion',component: QuestionAddComponent,}]} 其中，path空即表示默认情况的空路由，一般指向该部分的主页main。其写法有两种，一种是一般大家都会采用的形如上边代码的写法把默认写入children中，另一种是直接写在父路由，即把上边代码的children第一个配置替换上边父路由的配置。
代码解析：path和component就不多说了，路由的基本配置。
canActivate，路由守卫，一共有以下5个：
用CanActivate来处理导航到某路由的情况；
用CanActivateChild处理导航到子路由的情况；
用CanDeactivate来处理从当前路由离开的情况；
用Resolve在路由激活之前获取路由数据；
用CanLoad来处理异步导航到某特性模块的情况。
他们的使用方法类似，作用功能和使用的地方不同，这里先介绍本文用到的canactivate。这里指向的是AuthGuard守卫对象，这个对象返回一个布尔值，因此用来做权限控制和保护之类的功能。
children，子路由，redirectTo，重定向到，即该情况（后边为空）时默认加载到的页面和转到的路由。
pathMatch，匹配规则，有prefix和full两种。full即严格全词匹配；prefix即匹配前缀，意思就是以该path开头的都能匹配到。两者的差别语言描述难以想象，举个栗子：/a,/asd,/a/sdds,/asd/sda。full时只能匹配到/a和/a/assda，前缀则都可以匹配到。（这里应该没有理解错吧。有错误欢迎大家指正）const paper_routs: Route = { path: 'papers', loadChildren: './test-paper/main/papers.module#PapersModule' }; 主要就是一个loadChildren属性，其中配置内容以#标识，即#后边的内容在主组件初始化的时候不加载，因而在主组件的import中也不需要引入，需要去掉。 还有路由的手动跳转navigate，即不再是通过页面点击实现路由跳转而是在脚本中手动触发跳转。 底层实现： navigate(commands: any[], extras?: NavigationExtras) : Promise
再就是路由的懒加载lazyload，也叫延迟加载，实现按需加载功能，对于页面优化有很大用处。代码如下
interface NavigationExtras {relativeTo : ActivatedRoutequeryParams : Paramsfragment : stringpreserveQueryParams : booleanqueryParamsHandling : QueryParamsHandlingpreserveFragment : booleanskipLocationChange : booleanreplaceUrl : boolean
} 1.以根路由跳转/login：
this.router.navigate(['login']);
2.设置relativeTo相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute
this.router.navigate(['login', 1],{relativeTo: route});
3.路由中传参数 /login?name=1
this .router.navigate([ 'login' , 1],{ queryParams: { name: 1 } }); 4.preserveQueryParams默认值为false，设为true，保留之前路由中的查询参数/login?name=1 to /home?name=1
this.router.navigate(['home'], { preserveQueryParams: true });
5.路由中锚点跳转 /home#top
this.router.navigate(['home'],{ fragment: 'top' });
6.preserveFragment默认为false，设为true，保留之前路由中的锚点/home#top to /role#top
this.router.navigate(['/role'], { preserveFragment: true });
7.skipLocationChange默认为false，设为true，路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效
this.router.navigate(['/home'], { skipLocationChange: true });
8.replaceUrl默认为true，设为false，路由不会进行跳转
this.router.navigate(['/home'], { replaceUrl: true });
转载于:https://www.cnblogs.com/ljwsyt/p/9044468.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！