您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Angular4中路由Router類如何實(shí)現(xiàn)跳轉(zhuǎn)navigate功能”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular4中路由Router類如何實(shí)現(xiàn)跳轉(zhuǎn)navigate功能”這篇文章吧。
首先路由配置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 });
以上是“Angular4中路由Router類如何實(shí)現(xiàn)跳轉(zhuǎn)navigate功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。