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