<commit_before># ルートコンポーネントにプロパティを渡す

コンポーネントで `$route` を使うと特定のURLでしか使用できないコンポーネントの柔軟性が制限されるルートで密結合を作り出します。

このコンポーネントをルーターが使用するプロパティからこのコンポーネントを分離するには:

**❌ $route に結合**

``` js
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
```

**👍 プロパティによる分離**

``` js
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})
```

これにより、コンポーネントをどこからでも使用できるようになり、コンポーネントの再利用とテストが容易になります。

### Boolean モード

props を true に設定すると、route.params がコンポーネントのプロパティとして設定されます。

### Object モード

props がオブジェクトの場合、これはコンポーネントプロパティとしてそのまま設定されます。
プロパティが静的なときに便利です。

``` js
const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})
```

### Function モード

プロパティを返す関数を作成することができます。
これにより、パラメータを別のタイプにキャストし、静的な値をルートベースの値などと組み合わせることができます。

``` js
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})
```

url `/search?q=vue` は `{query: "vue"}` をプロパティとして SearchUser コンポーネントに渡します。

ルート変更時にのみ評価されるため、プロパティの機能はステートレスにしてください。
ラッパーコンポーネントを使用すると、状態を変更して状態を変更することができます。

高度な使い方については、[example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)を参照してください。<commit_msg>improve passing-props translation (#1184)<commit_after># ルートコンポーネントにプロパティを渡す

コンポーネントで `$route` を使うと特定のURLでしか使用できないコンポーネントの柔軟性が制限されるルートで密結合を作り出します。

このコンポーネントをルーターが使用するプロパティからこのコンポーネントを分離するには:

**❌ $route に結合**

``` js
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
```

**👍 プロパティによる分離**

``` js
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})
```

これにより、コンポーネントをどこからでも使用できるようになり、コンポーネントの再利用とテストが容易になります。

### Boolean モード

props を true に設定すると、route.params がコンポーネントのプロパティとして設定されます。

### Object モード

props がオブジェクトの場合、これはコンポーネントプロパティとしてそのまま設定されます。
プロパティが静的なときに便利です。

``` js
const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})
```

### Function モード

プロパティを返す関数を作成することができます。
これにより、パラメータを別のタイプにキャストし、静的な値をルートベースの値などと組み合わせることができます。

``` js
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})
```

url `/search?q=vue` は `{query: "vue"}` をプロパティとして SearchUser コンポーネントに渡します。

ルート変更時にのみ評価されるため、props 関数はステートレスにしてください。プロパティを定義するために状態を必要とする場合はラッパーコンポーネントを使用してください。その方法で vue は状態変更に対応することができます。

高度な使い方については、[example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)を参照してください。
{'fraction_non_alphanumeric': 0.15694164989939638, 'fraction_numerical': 0.0013413816230717639, 'mean_word_length': 5.28, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6869493', 'n_tokens_mistral': 1790, 'n_tokens_neox': 1647, 'n_words': 208}