コンポーネントパラメータの受け渡しをルーティング

コンポーネントパラメータの受け渡しをルーティング

アセンブリで使用される  $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が、状態変化に反応することができます。

より高度な使い方については、を参照してください例を。