13,234
回編集
「Blazor - ルーティング」の版間の差分
ナビゲーションに移動
検索に移動
→概要
(ページの作成:「== 概要 == Blazorでは、URLパターンとコンポーネントを紐付けることでルーティングを実現する。<br> <br> Blazorのルーティングは、<code>@page</code>ディレクティブを使用して設定する。<br> このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。<br> <syntaxhighlight lang="c#"> // Pages/Counter.razorファイル @page "/count…」) |
(→概要) |
||
| 4行目: | 4行目: | ||
Blazorのルーティングは、<code>@page</code>ディレクティブを使用して設定する。<br> | Blazorのルーティングは、<code>@page</code>ディレクティブを使用して設定する。<br> | ||
このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。<br> | このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。<br> | ||
<br> | |||
<u>※注意</u><br> | |||
<u>ファイル名は大文字で始まる必要があり、razorファイルの拡張子は.razorの必要がある。</u><br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | <syntaxhighlight lang="c#"> | ||
// Pages/Counter.razorファイル | // Pages/Counter.razorファイル | ||
| 19行目: | 23行目: | ||
public int currentCount { get; set; } | public int currentCount { get; set; } | ||
} | } | ||
</syntaxhighlight> | |||
<br><br> | |||
== ルーティングファイル == | |||
Blazorでは、Pagesディレクトリに配置されたrazorファイルがルーティングの対象となる。<br> | |||
<br> | |||
以下に示す<u>/counter</u>の場合では、デフォルトでは以下に示すファイルが参照される。<br> | |||
* /<プロジェクトのトップディレクトリ>/Pages/Counter.razorファイル | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/counter" | |||
<h1>Counter</h1> | |||
</syntaxhighlight> | |||
<br> | |||
ただし、これは規約ベースのルーティングであり、<code>@page</code>ディレクティブで明示的に別のルートを指定することも可能である。<br> | |||
<br> | |||
以下に示すように設定することにより、異なるファイル配置でも/counterにルーティングすることができる。<br> | |||
<syntaxhighlight lang="c#"> | |||
// 例 : /Pages/MyCounter/Index.razorファイル | |||
@page "/counter" | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
Pagesディレクトリ配下のファイルへのルーティング<br> | |||
* /counter --> /Pages/Counter.razor | |||
<br> | |||
また、ネストされたディレクトリの場合は以下のようになる。<br> | |||
* /mypage --> /Pages/MyPage.razor | |||
* /admin/dashboard --> /Pages/Admin/Dashboard.razor | |||
* /settings/profile --> /Pages/Settings/Profile.razor | |||
<br> | |||
特殊なケースとして、Indexページは以下のようになる。<br> | |||
* / --> /Pages/Index.razor | |||
* /admin --> /Pages/Admin/Index.razor | |||
<br> | |||
なお、<code>@page</code>ディレクティブで明示的にルートを指定した場合は、この規約が上書きされる。<br> | |||
<br><br> | <br><br> | ||