详解Angular4中路由Router类的跳转navigate

 更新时间:2017年06月09日 17:04:56   作者:ZEKELOVE  
这篇文章主要介绍了详解Angular4中路由Router类的跳转navigate,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习。

官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html

在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到。

首先路由配置Route:

import { NgModule }       from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { HomeComponent }  from './home.component';
import { LoginComponent }   from './login.component';
import { RegisterComponent } from './register.component';
 
 const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'heroes',   component: RegisterComponent }
 ];
 
 @NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

 其次路由跳转Router.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 }); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • angularjs的一些优化小技巧

    angularjs的一些优化小技巧

    这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下
    2014-12-12
  • Angular6 用户自定义标签开发的实现方法

    Angular6 用户自定义标签开发的实现方法

    这篇文章主要介绍了Angular6 用户自定义标签开发的实现方法,下面我们就通过一个简单的例子演示Angular6中的这一新功能,小编觉得挺不错的,现在分享给大家,需要的朋友可以参考下
    2019-01-01
  • AnjularJS中$scope和$rootScope的区别小结

    AnjularJS中$scope和$rootScope的区别小结

    这篇文章给大家整理了关于AnjularJS中$scope和$rootScope的区别,文中运用实例代码介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09
  • Angular实现svg和png图片下载实现

    Angular实现svg和png图片下载实现

    这篇文章主要介绍了Angular实现svg和png图片下载实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Angular directive递归实现目录树结构代码实例

    Angular directive递归实现目录树结构代码实例

    本篇文章主要介绍了Angular directive递归实现目录树结构代码实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • AngularJS  $on、$emit和$broadcast的使用

    AngularJS $on、$emit和$broadcast的使用

    本文主要介绍AngularJS $on、$emit和$broadcast的使用,这里整理了详细的资料及简单示例代码有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS模块学习之Anchor Scroll

    AngularJS模块学习之Anchor Scroll

    这篇文章主要介绍了AngularJS模块学习之Anchor Scroll 的相关资料,需要的朋友可以参考下
    2016-01-01
  • 深入聊一聊Angular开发的内容

    深入聊一聊Angular开发的内容

    使用Angular开发需要非常多的前置知识,比如TypeScript、RxJS等,所以学习成本比较高,下面这篇文章主要给大家关于Angular开发内容的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • angularJS的radio实现单项二选一的使用方法

    angularJS的radio实现单项二选一的使用方法

    下面小编就为大家分享一篇angularJS的radio实现单项二选一的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Angularjs自定义指令实现分页插件(DEMO)

    Angularjs自定义指令实现分页插件(DEMO)

    由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
    2017-09-09

最新评论