記事ディレクトリ
1.キーの改良
- ネストされたルーティング
- ルートとサブルートを追加する
- 子供の属性
- サブルートビュー
- ルートとサブルートを追加する
2.ネストされたルーティング
一部のより複雑なアプリケーションは、ネストされたルートとコンポーネントの複数のレイヤーで構成されます
ユーザーパーソナルセンターをアプリケーションに追加すると、ユーザーセンターは複数のページで構成されます。つまり、ユーザーセンターのサイドバーに入り、次のようなナビゲーションが行われます。
3.ルートとサブルートを追加します
...
import User from './views/User.vue'
import Profile from './views/User/Profile'
import Cart from './views/User/Cart'
...
...
{
path: '/user',
component: User,
children: [
{
path: '',
name: 'user',
component: Profile
},
{
path: 'cart',
name: 'user-cart',
component: Cart
}
]
}
...
3.1子供の属性
ルートのchildrenネストされたサブ経路を表現
- 先頭がルートパスを表す
path場合のサブルーティング/、パスはもはや親ベースではない、または親ベースpath - 子ルート
pathが空の場合、デフォルトのサブルート - 子にデフォルトのルートルートがある場合、親を
nameデフォルトのサブルートに設定する必要があります
4.サブルートビュー
サブルートを作成したら、ビューコンポーネントで設定する必要もあります router-view
// User.vue
<template>
<div>
<h3>用户中心</h3>
<ul class="left">
<router-link exact tag="li" :to="{name: 'user'}">基本信息</router-link>
<router-link tag="li" :to="{name: 'user-cart'}">我的购物车</router-link>
</ul>
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
<style scoped>
.left {
float: left;
width: 200px;
}
.left li {
line-height: 30px;
cursor: pointer;
}
</style>
5.例
ユーザーページのサブナビゲーションを実装する
5.1 example01
\ app \ src \ views \ User \ Profile.vue
<template>
<div>
Profile
</div>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>
\ app \ src \ views \ User \ Cart.vue
<template>
<div>
Cart
</div>
</template>
<script>
export default {
name: "Cart"
}
</script>
<style scoped>
</style>
\ app \ src \ router \ index.js
let router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/view/:id',
name: 'view',
component: Detail
},
{
path: '/user',
name: 'user',
component: User
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/user/profile',
name: 'userProfile',
component: Profile
},
{
path: '/user/cart',
name: 'userCart',
component: Cart
}
]
});
\ app \ src \ views \ User.vue
<template>
<div>
<h3>用户中心</h3>
<ul class="left">
<router-link exact tag="li" :to="{name: 'userProfile'}">基本信息</router-link>
<router-link tag="li" :to="{name: 'userCart'}">我的购物车</router-link>
</ul>
</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
.left {
float: left;
width: 200px;
}
.left li {
line-height: 30px;
cursor: pointer;
}
</style>
表示が私たちのニーズと一致していません。切り替え後、ユーザーセンター全体のナビゲーションコンテンツがカバーされます。
割り当てるルートはすべて顶层1つのレイヤー上にあるため、ネスト関係はありません。
したがって、それはにネスト表示されないUserページが、App.vue中にrouter-view真ん中。
しかし、私たちが達成したいのは、ページにネストされてUser表示できるUserナビゲーションページです。
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a1.99ブランチ：branch05コミットの説明：a1.99（example01-ユーザーページのサブナビゲーション-カバレッジの問題）
日：a1.99
5.2 example02
{
path: '/user',
name: 'user',
component: User,
children: [
{
// 上一层的path拼到这一层的path，类似层层继承关系
path: 'profile',
name: 'userProfile',
component: Profile
},
{
// 上一层的path拼到这一层的path，类似层层继承关系
path: 'cart',
name: 'userCart',
component: Cart
}
]
}
表示が効果がないのはなぜですか？
ルーティングレベルはページに反映され、対応するrouter-viewレベルも必要であり、トップレベルrouter-viewはトップレベルのルーティング構成を満たす必要があります。
ここでネストされたサブルートは、対応するuserページrouter-view内に表示されます。したがって、コンポーネントをページにuser追加する必要がありrouter-viewます（ページの右側に表示されるようにします）。
したがって、ルーティングにはネストがあり、router-viewビューにはネストされた対応があります。
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.01ブランチ：branch05コミットの説明：a2.01（example02-サブルートに変更されましたが、効果はありません）
タグ：a2.01
5.3 example03
\ app \ src \ views \ User.vue
<template>
<div>
<h3>用户中心</h3>
<ul class="left">
<router-link exact tag="li" :to="{name: 'userProfile'}">基本信息</router-link>
<router-link tag="li" :to="{name: 'userCart'}">我的购物车</router-link>
</ul>
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
.left {
float: left;
width: 200px;
}
.left li {
line-height: 30px;
cursor: pointer;
}
</style>
注：ネストされたサブルートのpath場合は/、次のような設定を追加しないでください。'/cart'これは、直接'/cart'（ルートパスアクセスモードを表す）アクセスを意味し、'/user/cart'もはやアクセスしないことを意味します。
したがって、設定を追加しないでください。/サブパススプライシングはデフォルトで実行されます（上記のスプライシングフォームを継承します）。
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.02ブランチ：branch05コミットの説明：a2.02（example03-サブルートスイッチングの実装）
タグ：a2.02
5.4 example04
別の問題があります。をクリックするUserと、サブナビゲーションビューが空白になります。必要に応じて、これを実行できる場合があります。需要が今必要な場合。
クリックするUserと、サブページがデフォルトで基本情報にジャンプします。このとき、デフォルトのルートを設定する必要があります。
{
// 上一层的path拼到这一层的path，类似层层继承关系
// ''就代表默认路径
path: '',
name: 'userProfile',
component: Profile
},
優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.03ブランチ：branch05コミットの説明：a2.03（example04-サブルート切り替えの実装-サブページはデフォルトで基本情報にジャンプします）
タグ：a2.03
（後で追加されます）