詳解Angular4中路由Router類的跳轉(zhuǎn)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 {}
其次路由跳轉(zhuǎn)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.以根路由跳轉(zhuǎn)/login
this.router.navigate(['login']);
2.設(shè)置relativeTo相對當前路由跳轉(zhuǎn)，route是ActivatedRoute的實例，使用需要導入ActivatedRoute
this.router.navigate(['login', 1],{relativeTo: route});
3.路由中傳參數(shù) /login?name=1
this.router.navigate(['login', 1],{ queryParams: { name: 1 } });
4.preserveQueryParams默認值為false，設(shè)為true，保留之前路由中的查詢參數(shù)/login?name=1 to /home?name=1
this.router.navigate(['home'], { preserveQueryParams: true });
5.路由中錨點跳轉(zhuǎn) /home#top
this.router.navigate(['home'],{ fragment: 'top' });
6.preserveFragment默認為false，設(shè)為true，保留之前路由中的錨點/home#top to /role#top
this.router.navigate(['/role'], { preserveFragment: true });
7.skipLocationChange默認為false，設(shè)為true，路由跳轉(zhuǎn)時瀏覽器中的url會保持不變，但是傳入的參數(shù)依然有效
this.router.navigate(['/home'], { skipLocationChange: true });
8.replaceUrl默認為true，設(shè)為false，路由不會進行跳轉(zhuǎn)
this.router.navigate(['/home'], { replaceUrl: true });
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下2014-12-12
Angular6 用戶自定義標簽開發(fā)的實現(xiàn)方法
這篇文章主要介紹了Angular6 用戶自定義標簽開發(fā)的實現(xiàn)方法，下面我們就通過一個簡單的例子演示Angular6中的這一新功能，小編覺得挺不錯的，現(xiàn)在分享給大家，需要的朋友可以參考下2019-01-01
AnjularJS中$scope和$rootScope的區(qū)別小結(jié)
這篇文章給大家整理了關(guān)于AnjularJS中$scope和$rootScope的區(qū)別，文中運用實例代碼介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
Angular實現(xiàn)svg和png圖片下載實現(xiàn)
這篇文章主要介紹了Angular實現(xiàn)svg和png圖片下載實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Angular directive遞歸實現(xiàn)目錄樹結(jié)構(gòu)代碼實例
本篇文章主要介紹了Angular directive遞歸實現(xiàn)目錄樹結(jié)構(gòu)代碼實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
AngularJS $on、$emit和$broadcast的使用
本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細的資料及簡單示例代碼有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了AngularJS模塊學習之Anchor Scroll 的相關(guān)資料,需要的朋友可以參考下2016-01-01
使用Angular開發(fā)需要非常多的前置知識,比如TypeScript、RxJS等,所以學習成本比較高,下面這篇文章主要給大家關(guān)于Angular開發(fā)內(nèi)容的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
angularJS的radio實現(xiàn)單項二選一的使用方法
下面小編就為大家分享一篇angularJS的radio實現(xiàn)單項二選一的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Angularjs自定義指令實現(xiàn)分頁插件(DEMO)
由于最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數(shù)據(jù)的功能，后來自己就用自定義指令實現(xiàn)了該功能，下面小編把實例demo分享到腳本之家平臺，需要的朋友參考下2017-09-09