Teknik olarak doğru olsa da, diğer yanıtlar Angular'ın URL'den rota eşleşmesinin bir açıklamasından faydalanacaktır. pathMatch: fullYönlendiricinin ilk etapta nasıl çalıştığını bilmiyorsanız tam olarak (kelime oyununu affedin) anlayabileceğinizi sanmıyorum.
Önce birkaç temel şeyi tanımlayalım. Biz örnek olarak bu URL'yi kullanırız: /users/james/articles?from=134#section.
Açık olabilir, ancak önce sorgu parametrelerinin ( ?from=134) ve parçaların ( #section) yol eşleşmesinde herhangi bir rol oynamadığını belirtelim . Yalnızca temel url ( /users/james/articles) önemlidir.
Açısal, URL'leri segmentlere ayırır . Segmentleri /users/james/articleselbette users, jamesve articles.
Yönlendirici yapılandırması, tek bir kök düğümü olan bir ağaç yapısıdır. Her Routenesne, childrensırayla başka childrenveya yaprak düğümlere sahip olabilen düğümlere sahip olabilen bir düğümdür .
Yönlendiricinin amacı , kök düğümden başlayarak URL'nin tüm (!!!) segmentleriyle tam olarak eşleşecek bir yönlendirici yapılandırma dalı bulmaktır . Bu çok önemli! Angular, tüm URL ile eşleşebilecek bir yol yapılandırma dalı bulmazsa - ne fazla ne de az - hiçbir şey oluşturmayacaktır .
Örneğin, hedef URL'niz, /a/b/cancak yönlendirici yalnızca /a/bveya ile eşleşebiliyorsa /a/b/c/d, eşleşme yoktur ve uygulama hiçbir şey oluşturmayacaktır.
Son olarak, rotalar normal rotalardan biraz farklı redirectTodavranıyor ve bana öyle geliyor ki, herkesin gerçekten kullanmak isteyeceği tek yer bunlar . Ama buna daha sonra değineceğiz.pathMatch: full
Varsayılan ( prefix) yol eşleşmesi
Adın arkasındaki mantık prefix, böyle bir yol yapılandırmasının, yapılandırılanın pathkalan URL segmentlerinin bir öneki olup olmadığını kontrol etmesidir. Bununla birlikte, yönlendirici yalnızca tam segmentlerle eşleşebilir , bu da bu adlandırmayı biraz kafa karıştırıcı hale getirir.
Her neyse, diyelim ki bu bizim kök seviyesinde yönlendirici yapılandırmamız:
const routes: Routes = [
{
path: 'products',
children: [
{
path: ':productID',
component: ProductComponent,
},
],
},
{
path: ':other',
children: [
{
path: 'tricks',
component: TricksComponent,
},
],
},
{
path: 'user',
component: UsersonComponent,
},
{
path: 'users',
children: [
{
path: 'permissions',
component: UsersPermissionsComponent,
},
{
path: ':userID',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
],
},
];
RouteBuradaki her bir nesnenin varsayılan eşleştirme stratejisini kullandığını unutmayın prefix. Bu strateji, yönlendiricinin tüm yapılandırma ağacını yinelediği ve URL tam olarak eşleşene kadar bunu hedef URL segmentiyle segment bazında eşleştirmeye çalıştığı anlamına gelir . Bu örnek için şu şekilde yapılacaktır:
- İlk URL segmenti ile tam bir eşleşme bulmak için kök diziyi yineleyin -
users.
'products' !== 'users', bu yüzden o dalı atlayın. Bir .startsWith()veya .includes()- yerine bir eşitlik kontrolü kullandığımızı unutmayın - yalnızca tam segment eşleşmeleri sayılır!:otherherhangi bir değerle eşleşir, bu nedenle bir eşleşme olur. Ancak, hedef URL henüz tam (hala eşleşmesi gerekir eşleşmeyen jamesve articlesçocuklar için böylece yönlendirici görünüyor).
- Tek çocuğu
:otherDİR tricksolduğunu !== 'james'dolayısıyla bir maç değil.
- Angular daha sonra kök diziye geri döner ve oradan devam eder.
'user' !== 'users, dalı atla.'users' === 'users- segment eşleşiyor. Ancak, bu henüz tam bir eşleşme değil, bu nedenle çocukları aramalıyız (3. adımda olduğu gibi).
'permissions' !== 'james', Bunu atlayın.:userIDherhangi bir şeyle eşleşir, dolayısıyla jamessegment için bir eşleşmemiz olur . Ancak bu yine de tam bir eşleşme değil, bu nedenle eşleşecek bir çocuk aramamız gerekiyor articles.
- Bunun bize tam bir eşleşme sağlayan
:userIDbir çocuk rotası olduğunu görebiliyoruz articles! Böylece uygulama ortaya çıkar UserArticlesComponent.
Tam URL ( full) eşleşiyor
örnek 1
Şimdi usersrota yapılandırma nesnesinin şöyle göründüğünü hayal edin :
{
path: 'users',
component: UsersComponent,
pathMatch: 'full',
children: [
{
path: 'permissions',
component: UsersPermissionsComponent,
},
{
path: ':userID',
component: UserComponent,
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
],
}
Kullanımına dikkat edin pathMatch: full. Durum böyle olsaydı 1-5 arası adımlar aynı olurdu, ancak 6. adım farklı olurdu:
'users' !== 'users/james/articles- yol yapılandırması tam URL ile eşleşmediğinden segment eşleşmiyor , yani .userspathMatch: fullusers/james/articles- Eşleşme olmadığı için bu şubeyi atlıyoruz.
- Bu noktada bir eşleşme bulamadan yönlendirici yapılandırmasının sonuna ulaştık. Uygulama hiçbir şey vermez .
Örnek 2
Ya bunun yerine şuna sahip olsaydık:
{
path: 'users/:userID',
component: UsersComponent,
pathMatch: 'full',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
}
users/:userIDile pathMatch: fullmaçların sadece users/jamesböylece bir kez daha hayır-maç, ve uygulama hiçbir şey çıkarmaz.
Örnek 3
Şunu düşünelim:
{
path: 'users',
children: [
{
path: 'permissions',
component: UsersPermissionsComponent,
},
{
path: ':userID',
component: UserComponent,
pathMatch: 'full',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
],
}
Bu durumda:
'users' === 'users- segment eşleşiyor, ancak james/articlesyine de eşleşmiyor . Çocuk arayalım.
'permissions' !== 'james' - atla.:userID'Sadece olacağını tek bir segment, eşleşebilir james. Ancak, bu bir pathMatch: fullyoldur ve eşleşmelidir james/articles(kalan URL'nin tamamı). Bunu yapamaz ve bu yüzden bir eşleşme değildir (bu yüzden bu dalı atlıyoruz)!
- Yine, URL için herhangi bir eşleşme bulamadık ve uygulama hiçbir şey vermiyor .
Fark etmiş olabileceğiniz gibi, bir pathMatch: fullkonfigürasyon temelde şunu söylüyor:
Çocuklarımı görmezden gelin ve sadece benimle eşleştirin. Kalan tüm URL segmentlerini kendim eşleştiremiyorsam , devam edin.
Yönlendirmeler
A Routetanımlayanlar redirectToaynı ilkelere göre hedef URL ile eşleştirilecektir. Buradaki tek fark , yönlendirmenin bir segment eşleşir eşleşmez uygulanmasıdır . Bu, bir yönlendirme yolu varsayılan prefixstratejiyi kullanıyorsa, yeniden yönlendirmeye neden olmak için kısmi eşleşme yeterli olduğu anlamına gelir . İşte güzel bir örnek:
const routes: Routes = [
{
path: 'not-found',
component: NotFoundComponent,
},
{
path: 'users',
redirectTo: 'not-found',
},
{
path: 'users/:userID',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
];
İlk URL'miz ( /users/james/articles) için, şöyle olur:
'not-found' !== 'users' - Bunu atlayın.'users' === 'users' - bir kibritimiz var.- Bu maç bir var
redirectTo: 'not-found'olan, hemen uygulanır .
- Hedef URL olarak değişir
not-found.
- Yönlendirici tekrar eşleşmeye başlar ve
not-foundhemen için bir eşleşme bulur . Uygulama oluşturulur NotFoundComponent.
Şimdi usersrotada şunlar da olsaydı ne olurdu bir düşünün pathMatch: full:
const routes: Routes = [
{
path: 'not-found',
component: NotFoundComponent,
},
{
path: 'users',
pathMatch: 'full',
redirectTo: 'not-found',
},
{
path: 'users/:userID',
children: [
{
path: 'comments',
component: UserCommentsComponent,
},
{
path: 'articles',
component: UserArticlesComponent,
},
],
},
];
'not-found' !== 'users' - Bunu atlayın.usersURL'nin ilk segmentiyle eşleşir, ancak rota yapılandırması bir fulleşleşme gerektirir , bu nedenle atlayın.'users/:userID'eşleşir users/james. articleshala eşleşmiyor ancak bu rotada çocuklar var.
articlesÇocuklarda bir eşleşme buluyoruz . Tüm URL artık eşleştirilir ve uygulama oluşturulur UserArticlesComponent.
Boş yol ( path: '')
Boş yol, biraz özel bir durumdur, çünkü herhangi bir segmenti "tüketmeden" eşleşebilir (bu nedenle, altlarının bu segmenti yeniden eşleştirmesi gerekir). Şu örneği düşünün:
const routes: Routes = [
{
path: '',
children: [
{
path: 'users',
component: BadUsersComponent,
}
]
},
{
path: 'users',
component: GoodUsersComponent,
},
];
Diyelim ki erişmeye çalışıyoruz /users:
path: ''her zaman eşleşir, dolayısıyla rota eşleşir. Ancak, URL'nin tamamı eşleşmedi - yine de eşleşmemiz gerekiyor users!usersKalan (ve yalnızca!) Segmentle eşleşen bir çocuk olduğunu görebiliriz ve tam bir eşleşmemiz var. Uygulama oluşturulur BadUsersComponent.
Şimdi asıl soruya geri dönün
OP, bu yönlendirici yapılandırmasını kullandı:
const routes: Routes = [
{
path: 'welcome',
component: WelcomeComponent,
},
{
path: '',
redirectTo: 'welcome',
pathMatch: 'full',
},
{
path: '**',
redirectTo: 'welcome',
pathMatch: 'full',
},
];
Kök URL'ye ( /) gidersek , yönlendirici bunu şu şekilde çözecektir:
welcome boş bir segmentle eşleşmiyor, bu yüzden atlayın.path: ''boş segmentle eşleşir. pathMatch: 'full'URL'nin tamamını eşleştirdiğimizden de tatmin olan bir a'ya sahiptir (tek bir boş segmenti vardı).- Bir yönlendirme
welcomegerçekleşir ve uygulama oluşturulur WelcomeComponent.
Ya hayır yoksa pathMatch: 'full'?
Aslında, her şeyin tamamen aynı şekilde davranması beklenir. Ancak, Angular açıkça böyle bir yapılandırmayı ( { path: '', redirectTo: 'welcome' }) engeller çünkü bunu Routeyukarıya koyarsanız welcome, teorik olarak sonsuz bir yeniden yönlendirme döngüsü oluşturur. Yani Angular sadece bir hata atar , bu yüzden uygulama hiç çalışmaz! ( https://angular.io/api/router/Route#pathMatch )
Aslında, bu bana pek mantıklı gelmiyor çünkü Angular , bu tür sonsuz yeniden yönlendirmelere karşı bir koruma da uyguladı - her yönlendirme düzeyi için yalnızca tek bir yönlendirme çalıştırıyor! Bu, diğer tüm yönlendirmeleri durdurur (aşağıdaki örnekte göreceğiniz gibi).
Peki ya path: '**'?
path: '**'maç olacak kesinlikle bir şey ( af/frewf/321532152/fsaya a olmaksızın bir maç)pathMatch: 'full' .
Ayrıca, her şeyle eşleştiği için { path: '', redirectTo: 'welcome' }, bu kurulumda tamamen gereksiz kılan kök yolu da dahil edilmiştir .
Yeterince tuhaf bir şekilde, bu konfigürasyona sahip olmak gayet iyi:
const routes: Routes = [
{
path: '**',
redirectTo: 'welcome'
},
{
path: 'welcome',
component: WelcomeComponent,
},
];
Gidersek /welcome, path: '**'bir eşleşme olacak ve hoş geldiniz için bir yönlendirme gerçekleşecek. Teorik olarak bu, sonsuz bir yeniden yönlendirme döngüsü başlatmalıdır, ancak Angular bunu hemen durdurur (daha önce bahsettiğim koruma nedeniyle) ve her şey yolunda gider.