Vue-Routerルートの入れ子理解に深く入る


背景
最近、初めて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つの点が必要です。
  • コンポーネント参照
  • コンポーネントの中にrouter-viewコンポーネント
  • があります。
    その友達は父ルートなので、部品を引用していません。子ルートには積載容器がないので、自然と彼の言った効果がない状況が現れました。ここで経験を皆さんに共有します。初心者に役立つように、私達を応援してください。