router-viewでpropsを渡したい時の注意点

router-viewでpropsをうまく渡せない

Vue.jsのrouter-viewを使ってpropsを渡したい時になかなかうまく行かず詰まったため、備忘録として記載しておきます。

状況としては以下のような感じです。

router-viewの部分

router-viewで以下のようにいくつかのpropsを渡しました。

<router-view
        :key="$route.fullPath"
        :prop1='{{ $obj }}'
        :prop_sample2='{{ json_encode($something) }}'
        :prop_sample3='111111'
        :prop_sample4='aaaaaaaa'
        :noPropSample5='aaaaaaaa'
>
</router-view>

propsの部分

受け取ったpropsは以下のような感じです。

props: {
    prop1: Object,
    prop_sample2: Number,
    prop_sample3: Number,
    prop_sample4: String,
    noPropSample5: String,
},

propsがうまく渡せているか確認する

渡したpropsがコンポーネントへうまく渡せているか確認しました。

確認方法は、コンポートネントの方で、created() { }辺りにconsole.logを入れてみます。

ちゃんと渡せていれば、console.log(this.prop1)とかで値が取れます。

とりあえず、全部表示するので以下で表示してみます。

console.log(this)

しかしnoPropSample5の値が何回確認してもうまく行かず、、、、

原因

どうやらrouter-viewやpropsでnoPropSample5のようにキャメルで定義するとダメっぽい。。。

ハマりやすそうなので、気をつけたほうがいいですね。

たまにVue.jsやると忘れて何回も引っかかりそうです。

まとめ

いかがでしたでしょうか。

今回は、router-viewを使ってpropsを渡したい時の注意点でしたが、同じように行き詰まった方はいましたでしょうか？

こちらの記事は完全に備忘録として記録していますので、もし誤っていたり、他に良い回避方法などがあればわかる方は教えていただけるとありがたいです。