Vue Routerで遷移先にデータを渡す方法

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from './components/Home'
import Shop from './components/Shop'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        component: Home,
    },
    {
        path: '/menu',
        component: Menu,
        name: 'Menu', // あとでnameでリンク先を指定する
        props: true
    }
]

const router = new VueRouter({
    mode: 'history',
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else {
            return {
                x: 0,
                y: 0
            };
        }
    }

})
export default router

import Vue from 'vue'
import App from './App.vue'

import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

<template>
  <div id="app">
    <Header />
    <router-view></router-view> // ここにHome.vueやMenu.vueが表示される
  </div>
</template>

<script>
import Header from "./components/Header";

export default {
  name: "App",
  components: {
    Header
  }
};
</script>

<template>
  <header>
    <nav>
      <ul>
        <li>
          <router-link to="/" exact>HOME</router-link>
        </li>
        <li>
          <router-link to="/about">ABOUT</router-link>
        </li>
        <li>
          <router-link to="/menu">MENU</router-link>
        </li>
        <li>
          <router-link to="/contact">CONTACT</router-link>
        </li>
      </ul>
    </nav>
  </header>
</template>
<script>
export default {};
</script>

<template>
  <section>
    //色々と省略してカテゴリーのrouter-linkのみ
          <router-link :to="{name:'Menu', params:{'selectedCategory':'dessert'}}">
            Desserts
          </router-link>

          <router-link :to="{name:'Menu', params:{'selectedCategory':'beverage'}}">
            Beverages
          </router-link>
 
  </section>
</template>
<script>
export default {};
</script>

<template>
  <div>

  // カテゴリー選択ボタン
    <div>
      <input
        type="radio"
        name="category"
        id="all"
        value="all"
        v-model="category"
        checked // 初期設定
        @change="changeCategory"
      />
      <label for="all">ALL</label>
      <input
        type="radio"
        name="category"
        id="desserts"
        value="desserts"
        v-model="category"
        @change="changeCategory"
      />
      <label for="desserts">Desserts</label>
      <input
        type="radio"
        name="category"
        id="beverages"
        value="beverages"
        v-model="category"
        @change="changeCategory"
      />
      <label for="beverages">Beverages</label>
    </div>
    
  // 商品一覧レンダリング
      <ul>
        <li v-for="item in selectedItems" :key="item.id">
           {{item.title}}
        </li>
      </ul>

  </div>
</template>
<script>
import items from "@/assets/item"; // 別のファイルで管理している商品リストを読み込む
export default {
  name: "Items",
  props: ["selectedCategory"], // 選択されたカテゴリーを受け取る
  data() {
    return {
      category: "all", //ナビメニューで「MENU」を押したときの初期設定
      items,
      selectedItems: []
    };
  },
  methods: {
    changeCategory() {
      // カテゴリーを変更するごとに商品リストの内容を入れ替える処理
  },
  mounted() {
      // Menuコンポーネントが表示されるときの処理
    let tempBox = [];
    if (this.selectedCategory) { // Homeページからカテゴリーを選んで遷移してきたとき
      this.category = this.selectedCategory;
      for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].category === this.category) {
          tempBox.push(this.items[i]);
        }
      }
    } else {
      tempBox = this.items; // HomeページからMENUを押して遷移してきたとき
    }
    this.selectedItems = tempBox;
  }
};
</script>