Vueルーターセクション2 Vueルーター構成サブルーター
セクション2 Vueルーター構成のサブルーティング
このレッスンでは、サブルーティングとも呼ばれるサブメニューのルーティングを学習します。サブルーティングのケースは通常、ページに基本テンプレートがあり、その下のページがすべてこのテンプレートに属し、スタイルの一部のみが変更されている場合に使用されます。最初のレッスンの例を続け、Hiのページの下に2つの新しいサブページ、つまり「Hi Page 1」と「Hi Page 2」を作成して、サブルーティングを実装します。
1. App.vueのナビゲーションコードを変換する
基本的なナビゲーション機能を実現するには、app.vueのナビゲーションコードを変更する必要があります。<router-link>タグ付きの2つの新しいナビゲーションリンクが追加されました。
App.vueコード：
<p>导航：
<router-link to="/">首页</router-link>
<router-link to="/hi">Hi页面</router-link>
<router-link to="/hi/Hi1">-Hi页面1</router-link>
<router-link to="/hi/Hi2">-Hi页面2</router-link>
</p>
ホームページのナビゲーションバーに再度アクセスすると、さらに2つのサブナビゲーション、Hi Page 1とHi Page 2が追加されました。
2.コンポーネントを書き換える/ Hi.vueページ
Hi.vueをユニバーサルテンプレートに変更し、<router-view>タグを追加して、サブテンプレートの挿入場所を指定します。「Hi Page 1」と「Hi Page 2」は、継承のような「Hi Page」のサブページと同等です。「Hiページ」に<router-view>タグを追加します。
<template>
<div class="hello">
<h1>{{ msg }}<router-view /></h1>
<router-view class="aaa"></router-view>
</div>
</template>
<script>
export default {
name: 'hi',
data(){
return {
msg: 'Hi,I am Daisy'
}
}
}
</script>
<style scoped>
</style>
3.コンポーネントディレクトリに2つの新しいコンポーネントテンプレートHi1.vueとHi2.vueを作成します。
新しく作成されたテンプレートとHi.vueの間に大きな違いはありませんが、データ内のメッセージの値が変更されます。つまり、出力結果は同じではありません。
Hi1.vue：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi1!'
}
}
}
</script>
<style scoped>
</style>
Hi2.vue：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi2'
}
}
}
</script>
<style scoped>
</style>
4.変更router/index.js代码
これで、ルーティング構成ファイルを変更する限り、親テンプレートと子テンプレートだけでなく、ナビゲーションもできます。サブルーチンは、元のルーティング構成の下に子フィールドを追加することによって作成されます。
children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]
子フィールドの後に配列が続きます。配列は基本的に他の構成ルートと同じであり、パスとコンポーネントを構成する必要があります。このサブルートの構成を具体的に見てみましょう。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path:'/Hi',
name: 'Hi',
components: Hi,
children:[
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})
ルーティングファイルを設定する前に、importまずHi1とHi2 をインポートする必要があることに注意してください。
概要：
このレッスンの内容はルーティング構成でよく使用されます。たとえば、ショッピングモジュールを作成する場合、ショッピングモジュールには同じ要素が多数あります。このフォームのサブルーティングを使用し、最初に親ページを設定してから、サブページを変更します。このレッスンがお役に立てば幸いです。実際、ルーティングプロセスはまだ少し面倒なので、完全に習得するために数回練習してください。