this.$router.pushにパラメーターを持たせて遷移先のページでpropsとして使う

this.$router.push({name: '移動先コンポーネントの名前', params: {キー名: "値"}})
で可能。


undefined

  • 投稿後にアーカイブページに移動して、「投稿しました」って表示
  • ログインにアカウントページに移動して、「ログインしました」って表示
  • ログアウトページ後にログインに移動して、「ログアウトしました」って表示
  • ログイン前にアカウントページのURLに直接アクセスしてきた人をログインページに飛ばして「ログインしてください」って表示
    上記のようなシーンで役に立つ。

router.jsでpropsを有効化

//backend\resources\js\router.js

import Router from 'vue-router'
import InquieryCreate from './components/page/inquiries'

//中略

{
    path: '/inquiries',
    name: 'inquiries',
    component: Inquiries,
    props: true
},

パラメーターを有効化したいルーティングにprops:trueを追記する。

パラメーターを送りたいコンポーネント

//post.vue

//投稿成功時などに
this.$router.push({name: 'inquiries', params: {message: "投稿しました。"}})

パラメーターを受け取りたいコンポーネント

<script>
    import RecordForm from "../layout/RecordForm";

    export default {
        props: ['message'],
        }
</script>

これで受け取る側のコンポーネントでは{{message}}として使えるようになる。

script的に使いたければ、created(){ }内ならthis.mesasgeとして使える。

【Vue.js】ルーティング時に遷移先のコンポーネントにprops経由で値を渡す

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事