07. VUE-ルータのルーティングネストされました

ネストされたルートの使用状況

ネストされたルーティング機能の1分析

• 親ルーティングテンプレートコンテンツを表示するには、リンクをクリックしてください
• 別のサブクラスのルーティングリンクでテンプレートの内容
• サブクラスのルーティング子テンプレートの内容を表示するには、リンクをクリックしてください
  

2.父はコンポーネントテンプレートをルーティング

• 親ルーティングリンク
• 親成分スタッフィングビットをルーティングします

<p>
<router-link to="/user">User </router-link>
<router-link to="/register">Register</router-link>
</p>
<div>
<!--控制组件的显示位置-->
<router-view></router-view>
</div>

3.子供のルーティングテンプレート

• 子供のルーティングリンク
• サブスタッフィングビットをルーティングします

const Register = {
//使用模板字符串 `xxx`，支持回车
template: `<div>
<h1>Register组件</hl>
<hr/>
<router-link to="/register/tab1">Tab1</router-link>
<router-link to="/register/tab2">Tab2</ router-link>
<!--子路由填充位置-->
<router-view/>
</div>`
}

4.ネストされたルーティングの設定

• 親の子供は、ルーティングの設定の子供のプロパティを介してルーティングされます

const router = new VueRouter({
routes: [
{ path: ' /user', component: User },
{ path: '/register',
component: Register,
//通过children 属性，为/register 添加子路由规则
children: [
{ path: "/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
    ]
   }
 ]
})