コンポーネントパラメータの受け渡しをルーティング
アセンブリで使用される $route
それらの高度にその柔軟性を制限する、アセンブリは、特定のURLのみを使用することができるように、結合されたルーティングが対応の形成を引き起こします。
使用 props
ルーティングし、デカップリング部品を:
置換および $route
結合
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
props
デカップリング
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
この方法は、あなたはそれが簡単に組み立てとテストを再利用すること、場所にコンポーネントのいずれかを使用することができます。
#ブールモード
場合は props
設定されている true
、route.params
それはコンポーネントのプロパティに設定されます。
#オブジェクトモデル
場合 props
オブジェクト、それがコンポーネントのプロパティであるとして提供されます。場合は props
、静的な時間に便利です。
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
#ファンクションモード
あなたは、関数の戻り値を作成することができます props
。あなたは、パラメータの別の型に変換することができるようになります。この方法では、ベースの静的な値の合計値は、ルーティング、およびように。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
URLが /search?q=vue
される {query: 'vue'}
と、属性として渡された SearchUser
アセンブリ。
保管してください props
それは場合にのみ、ルート変更を動作しますので、ステートレスの機能。あなたは、ステータス定義する必要がある場合は props
、使用しパッケージング成分を、そのようVueが、状態変化に反応することができます。
より高度な使い方については、を参照してください例を。