Vue-Routerルートの入れ子理解に深く入る
2781 ワード
背景
最近、初めてVueを勉強した友達に、どうして私の二階のルートが踊りませんでしたか?情報は十分ではないし、ソースが見えないです。その時は無頓着な顔をしていました。コードの問題だと思っています。等級とは関係がないです。続けて問い詰めます。(省略)?大体分かりました。この友達はVue-ROMEの入れ子の原理を理解していませんでした。下で整理しました。
Vue-Router入れ子ルート
まずプロジェクトの中に2つのルートProfileとPostsがあると仮定して、書き方によって彼らを1階のルートと定義して、Rootのサブルートです。そのため、Rootの中にrouter-viewコンポーネントがあって、サブルートを積載してこそ、サブルートの切り替え展示ができます。
1つのルート
Root容器
Rootのサブルートの展示はRootの中にあります。ルートを切り替えるのは、単にrouter-view容器の内容を切り替えるだけです。
上の基礎の上で、profileにルートを追加します。
プロフィルコンテナ
一階のルートと同じで、ProfileのサブルーティングはProfile容器で展示を切り替えるために必要です。Profileルートのcomponentは必須です。
どのサブルーティングも親ルートのコンポーネントの中で切り替えられて表示されます。何層のルートネストであれ、すべてこのように理解されていますので、親ルートは以下の2つの点が必要です。コンポーネント参照 コンポーネントの中にrouter-viewコンポーネント があります。
その友達は父ルートなので、部品を引用していません。子ルートには積載容器がないので、自然と彼の言った効果がない状況が現れました。ここで経験を皆さんに共有します。初心者に役立つように、私達を応援してください。
最近、初めてVueを勉強した友達に、どうして私の二階のルートが踊りませんでしたか?情報は十分ではないし、ソースが見えないです。その時は無頓着な顔をしていました。コードの問題だと思っています。等級とは関係がないです。続けて問い詰めます。(省略)?大体分かりました。この友達はVue-ROMEの入れ子の原理を理解していませんでした。下で整理しました。
Vue-Router入れ子ルート
まずプロジェクトの中に2つのルートProfileとPostsがあると仮定して、書き方によって彼らを1階のルートと定義して、Rootのサブルートです。そのため、Rootの中にrouter-viewコンポーネントがあって、サブルートを積載してこそ、サブルートの切り替え展示ができます。
1つのルート
Root容器
<div>
<h1>Root</h1>
<!-- -->
<router-view />
</div>
ルートの書き方
[
{
path: '/profile'
component: profile //
},
{
path: '/posts'
component: posts //
},
]
一階ルート展示Rootのサブルートの展示はRootの中にあります。ルートを切り替えるのは、単にrouter-view容器の内容を切り替えるだけです。
/profile /posts
+------------------+ +-----------------+
| Root | | Root |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
二階ルート上の基礎の上で、profileにルートを追加します。
プロフィルコンテナ
<div>
<h1>profile</h1>
<!-- profile -->
<router-view />
</div>
profile子ルート
[
{
path: '/profile'
component: profile, //
children: [
{
path: '/profile/list',
component: profileList
},
{
path: '/profile/item',
component: profileItem
}
]
},
...
]
二階ルート展示一階のルートと同じで、ProfileのサブルーティングはProfile容器で展示を切り替えるために必要です。Profileルートのcomponentは必須です。
/profile/list /profile/item
+------------------+ +-----------------+
| Root | | Root |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Profile | |
| | +----------+ | | | | +---------+ | |
| | | list | | | | | | item | | |
| | | | | | | | | | | |
| | +----------+ | | | | +---------+ | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
ルートネストのまとめどのサブルーティングも親ルートのコンポーネントの中で切り替えられて表示されます。何層のルートネストであれ、すべてこのように理解されていますので、親ルートは以下の2つの点が必要です。
その友達は父ルートなので、部品を引用していません。子ルートには積載容器がないので、自然と彼の言った効果がない状況が現れました。ここで経験を皆さんに共有します。初心者に役立つように、私達を応援してください。