angular5学习笔记（deep in 路由）

时间：2021-05-12 00:23:41

　　最近接手了一个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，前缀则都可以匹配到。（这里应该没有理解错吧。有错误欢迎大家指正）

　　　　再就是路由的懒加载lazyload，也叫延迟加载，实现按需加载功能，对于页面优化有很大用处。代码如下
　　　　　　const paper_routs: Route = { path: 'papers', loadChildren: './test-paper/main/papers.module#PapersModule' };
　　　　主要就是一个loadChildren属性，其中配置内容以#标识，即#后边的内容在主组件初始化的时候不加载，因而在主组件的import中也不需要引入，需要去掉。
　　　　
　　　　还有路由的手动跳转navigate，即不再是通过页面点击实现路由跳转而是在脚本中手动触发跳转。
　　　　　　底层实现：
　　　　　　　　navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
interface NavigationExtras {

  relativeTo : ActivatedRoute

  queryParams : Params

  fragment : string

  preserveQueryParams : boolean

  queryParamsHandling : QueryParamsHandling

  preserveFragment : boolean

  skipLocationChange : boolean

  replaceUrl : 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 });

相关文章