Vue Router を使用してコンポーネントにパラメータを渡す際、従来は $route.params や $route.query を直接参照する必要があり、コードが冗長になりがちです。これを解決するために、ルート設定で props オプションを活用することで、よりクリーンで保守性の高いコードを実現できます。

1. オブジェクト形式（静的値の注入）

props にオブジェクトを指定すると、そのキーと値がそのままコンポーネントのプロパティとして渡されます。動的なルートパラメータには対応しないため、使用頻度は低いです。

// ルート定義
{
  path: 'detail',
  component: Detail,
  props: { mode: 'static', version: 2 }
}

<!-- Detail コンポーネント -->
export default {
  props: ['mode', 'version']
}

2. 真偽値形式（params の自動マッピング）

props: true を設定すると、ルートパスに含まれる params（例: /detail/:id/:title）が自動的にコンポーネントの props として渡されます。

// ルート定義（パスに params 含む前提）
{
  path: 'detail/:id/:title',
  component: Detail,
  props: true
}

<!-- Detail コンポーネント -->
export default {
  props: ['id', 'title']
}

3. 関数形式（柔軟なパラメータ変換）

最も柔軟性が高い方法。関数を指定することで、$route オブジェクトに基づき任意の props を生成できます。特に query パラメータや複合的なロジックが必要な場合に有効です。

// ルート定義
{
  path: 'detail',
  component: Detail,
  props(route) {
    return {
      itemId: route.query.id,
      itemTitle: route.query.title,
      source: 'router'
    };
  }
}

<!-- Detail コンポーネント -->
export default {
  props: ['itemId', 'itemTitle', 'source']
}

ルーター設定例（index.js）

import VueRouter from 'vue-router';
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';
import Detail from '../pages/Detail.vue';

export default new VueRouter({
  routes: [
    { path: '/about', component: About },
    {
      path: '/home',
      component: Home,
      children: [
        { path: 'news', component: News },
        {
          path: 'message',
          component: Message,
          children: [
            {
              name: 'detail',
              path: 'detail/:id?/:title?', // params に対応
              component: Detail,
              // 以下のいずれかの props 設定を選択可能

              // ① 静的オブジェクト
              // props: { debug: true }

              // ② params 自動マッピング（パスに :id, :title 必須）
              // props: true

              // ③ 動的関数（query 対応含む）
              props(route) {
                return {
                  id: route.params.id || route.query.id,
                  title: route.params.title || route.query.title,
                  timestamp: Date.now()
                };
              }
            }
          ]
        }
      ]
    }
  ]
});