Vue-Routerで遷移する先のコンポーネントにプロパティを渡す

結論

router-viewで遷移する先に対して、プロパティを渡したい場面に出くわした。
以下でできた。(2パターン)

パターン1

router-viewが記述されているコンポーネントにて

RootComponent.vue

<template>
  <div>
    <div>
      <!-- dataから -->
      <router-view :prop1="propVal" />
    </div>
    <!-- computedから。名前付きビューでも一緒 -->
    <router-view name="slot1" :prop2="propVal2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      propVal: 'hoge'
    }
  },
  computed: {
    propVal2() {
      return this.$store.state.propData
    }
  }
}
</script>

PageComponent1.vue

<template>
  <span>
    {{ prop1 }}
  </span>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      require: true
    }
  }
}
</script>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
    // ...
    },
    {
      path: '/pageRoot',
      // name: 'pageRootDefault' <- だめ
      component: () => import('./views/RootRootComponent.vue'),
      children: [
        {
          path: '/', // childrenにpath:'/'がある場合、nameは親でなくこっちにつける
          name: 'pageRootDefault',
          components: {
            default: () =>
              import(/* webpackChunkName: "page1" */ './components/PageComponent1.vue'),
            slot1: () =>
              import(/* webpackChunkName: "page1" */ './components/PageComponent2.vue')
          }
        }
      ]
    }
  ]
})

computedだったら遷移先で参照してもよさそうだけど...

パターン2

router-link（もしくはrouter.push）を使って

PageComponent1.vue

<template>
  <span>
    {{ prop1 }}
  </span>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      require: true
    }
  }
}
</script>

PageComponent2.vue

<template>
  <span>
    {{ prop1 }}
    {{ prop2 }}
  </span>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      default: ''
    },
    prop2: {
      type: String,
      require: true
    }
  }
}
</script>

slotに指定した要素にもプロパティ渡せる。
遷移先のコンポーネントそれぞれに同じ名前が存在しても問題ない。
プロパティ名だけ見て渡しているっぽい

router.js

export default new Router({
  // ...
    {
      path: '/propTest',
      name: 'proptest',
      props: {
        // 複数ある場合はそれぞれに設定。"component:"の場合はprops:trueとか
        default: true,
        slot1: true
      },
      components:{
        default: () =>
          import(/* webpackChunkName: "propTest" */ './components/PageComponent1.vue'),
        slot1: () =>
          import(/* webpackChunkName: "propTest" */ './components/PageComponent2.vue')
      }
    },
 // ...
}

propsにはBoolean値のほかに、Objectやfunctionも渡せる。
値が決まっているときはObjectのほうが良い

Jump.vue

<template>
<template>
  <!-- ... -->
  <router-link :to="{ name: 'proptest2', params: { prop1: 'huge', prop2: 'hugo' } }" >
    link
  </router-link>
  <v-btn @click="jump">
    link2
  </v-btn>
  <!-- ... -->
</template>

<script>
export default {
  // ...
  methods: {
    jump: function () {
      this.$router.push({ name: 'proptest2', params: { prop1: 'piyo', prop2: 'foo' } })
    }
  }
}
</script>
</template>

（router.jsでpropsにBoolean値を設定したときは）paramsで指定した値が渡される

余談

$route使って渡すよりプロパティで渡したほうが、テストしやすいので良い設計らしい

参考
参考2