Copyright notice: This article is an original article and follows
CC 4.0 BY-NC-ND
Copyright agreement. If you want to repost this article, please attach the original source link and this statement.
Source link:
https://www.v2know.com/MainPage/PreView/1037
環境
- Visual Studio 2022 ENTERPRISE
新建項目Blazor WebAssembly Application，
不勾選Include sample pages，
只保留勾選Https的部分。
先從App.razor開始瞭解
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
總結來說，這段代碼的主要作用是在Blazor應用程序中設置路由導航的行為，指定了匹配和不匹配路徑時應該渲染的組件或顯示的內容。這使得應用程序可以根據不同的URL來呈現不同的頁面，並處理未找到路由的情況。
也就是說這個文件以<Router> 開始以</Router> 結束，不會有兩個或者多個并行于<Router>的標簽？
是的，正確理解。app.razor文件中的<Router>元素作為整個應用程序的路由入口，應該只存在一個。<Router>標籤包裹了應用程序中所有與路由相關的內容，因此這個文件的結構通常以<Router>開始，以</Router>結束。
如果需要進行路由相關的配置或邏輯擴展，應該在這個<Router>標籤內進行，而不是在其外部添加新的<Router>標籤。
一般例：
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<!-- 匹配成功的內容 -->
</Found>
<NotFound>
<!-- 匹配失敗的內容（404頁面） -->
</NotFound>
</Router>
[<Router AppAssembly="@typeof(App).Assembly">] 是唯一的嗎？
AppAssembly="@typeof(App).Assembly" 什麽的不需要我們修改參數嗎？
AppAssembly="@typeof(App).Assembly"
這個屬性通常不需要修改，因為它自動指向了應用程序的主程序集，這也是Blazor找到所有路由配置的地方。
為什麼默認不修改：
- 默認指向主程序集：
@typeof(App).Assembly這個配置默認指向應用程序的主程序集，它包含了應用程序中所有的組件和路由配置。因此，不需要手動修改這個設置。 - 適應大多數情況：大多數 Blazor 應用程序只需要在主程序集內部進行路由配置，這個默認設置能夠很好地支持這樣的需求。
- 避免不必要的錯誤：手動修改這個參數可能會導致 Blazor 無法正確找到應用程序內的組件或路由定義，從而引發錯誤或異常行為。
什麼情況下可能需要修改：
- 多程序集應用：如果你的應用程序非常複雜，並且路由配置分布在多個程序集內，可能需要修改這個參數來指向特定的程序集。但這是非常特殊的情況。
- 動態加載路由：在一些高級應用場景下，你可能需要從不同的程序集動態加載組件和路由，這時候也可能需要修改這個配置。
那關於<Found Context="routeData"> 這種寫法是固定的嗎？
routeData這個名稱可以根據你的需求任意命名，比如：
<Found Context="myRouteInfo">
<RouteView RouteData="@myRouteInfo" DefaultLayout="@typeof(MainLayout)" />
</Found>
關於<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />的解析
首先，最簡：
<RouteView RouteData="@routeData" />
一般：
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
可修改的部分：
<RouteView RouteData="@myCustomRouteData" DefaultLayout="@typeof(MyLayout)" />
完整的屬性列表包括：
- RouteData：必須的，傳遞匹配到的路由數據。
- DefaultLayout：可選的，當頁面組件沒有指定佈局時使用的默認佈局。
- Layout：可選的，用來動態設置佈局，覆蓋頁面組件自己的佈局設置。
OnParametersSet：可選的，當路由參數變化時的回調處理。（錯誤，這個只在一般的razor裏面調用）ChildContent：可選的，允許在（錯誤）RouteView中嵌入其他內容。
示例：
這是包含所有屬性的一個示例：
<RouteView RouteData="@myCustomRouteData" DefaultLayout="@typeof(MyLayout)" Layout="@typeof(AnotherLayout)" >
</RouteView>
DefaultLayout和Layout有什麽區別？
区别总结：
DefaultLayout是在頁面沒有指定佈局時作為備選佈局使用的。如果頁面已經指定了佈局，DefaultLayout將不起作用。Layout則是無論頁面有沒有佈局，當你設置了Layout屬性，它都會強制使用這個佈局，覆蓋頁面自己設置的佈局。