[vue.js] routerでpropsに値を渡してURL遷移する

バージョン

Vue.js 2.6.10

概要

routerのpushでURL遷移する際にpropsにデータを渡す方法。

コード

◾️hoge.vue（遷移元）

<script>
export default {
    methods: {
      newPage() {
        this.$router.push({ name: "user_list" , params: {user_code : this.userid}}).catch(() => {});
      },
    }
};
</script>

◾️fuga.vue（遷移先）

<script>
export default {
  props: {
    user_code: String
  },
};
</script>

router.jsのpropsをtrueに設定する必要がある。
◾️router.js

        {
          path: "/dashboard/fuga",
          name: "dash-fuga",
          component: () => import("./views/dashbord/fuga.vue"),
          props: true
        },

Vue.js & Nuxt.js超入門