vue-routerのライフサイクルフックについて

Question

前提・実現したいこと

vue-routerのライフサイクルフックについて知りたいです．

具体的には，<router-view></router-view>の部分がルーティングにより変化する仕様にしているのですが，各ルーティングにおけるコンポーネントの高さを取得したいです．

該当のソースコード

<template>
    <div>

        <headerItem></headerItem>

        <div class="wrapper">

            <sidebarItem></sidebarItem>

            <div class="contents" ref="contents">
                <div class="maincontents">
                    <router-view></router-view>
                </div>
            </div>
            <div class="float_clear"></div>

        </div>

        <footerItem></footerItem>

    </div>
</template>

<script>
import HeaderItem from './HeaderItem.vue';
import SidebarItem from './SidebarItem.vue';
import FooterItem from './FooterItem.vue';

export default {
    components: {
        HeaderItem,
        SidebarItem,
        FooterItem,
    },

    data () {
        return {
            height: {},
        }
    },

    methods: {
        getHeight() {
            var heightString = this.$refs.contents.clientHeight + 'px';
            Vue.set(this.height, 'height', heightString);
            console.log(heightString);
        }
    },

    mounted() {
        this.getHeight();
    }
}
</script>

悩んでいること

上記のコードにおいて，mouted()フックで実行している処理を，ルーティング<router-view></router-view>が変化するたびに実行したいです．

どのフックを使用すればいいかご教示お願いします．

Answer 1

ナビゲーション直後に何かするには$routeをwatchすればいいらしいです。
Fetching After Navigation - vue-router

ただその時点ではまだDOMの更新が完了していないので、$nextTickでそれが完了してから高さを取得するといいと思います。

DEMO(CodeSandbox)

Comments

[arw.tyx-out_mz]

おお！素晴らしいです！ありがとうございます！

nextTickって非同期対応はしていないですよね？

[karamarimo]

非同期対応とは何でしょうか？
$nextTick の引数の関数は非同期に実行されますが。

[arw.tyx-out_mz]

説明不足ですみません．

$nextTickはDOMの更新を待つとのことなので
axiosで取得したレスポンスを元にHTMLを組み上げるといった処理は完了を待ってくれないかということをお聞きしたかったです．

[karamarimo]

axiosで取得したあとdataを更新すると思いますがそのタイミングで $nextTick を使えばいいと思います。

[arw.tyx-out_mz]

なるほど！

じゃあ今回の場合，

App.vueのテンプレートの中に<router-view>があるのですが，
heightを取得しようとしている部分がApp.vueの中にあり，axiosでデータ取得をする部分が各<router-view>の中にある場合は取得は厳しそうですか？

Vuexとかを用いないといけませんかね．．．

[karamarimo]

なるほど、ナビゲーション時だけでなくrouter-viewのコンテンツが自分で高さを変えるというわけですね。
Vuexを使わないといけないということはないと思いますが、Vuexを使うとキレイになるのではないかと思います。もちろん高さ以外のデータを store で共有する必要はありません。

別の方法としては、Resize Observerを使うことです。これである要素のサイズが変わる度に何らかの処理をすることができます。ですが、今の所 chrome しか対応していませんので微妙です。

あるいは global event bus を用いるのもありかもしれません。
https://alligator.io/vuejs/global-event-bus/

ちなみに、もし他の要素の高さを合わせるためにjsで高さを取得しているなら、CSSだけで解決できるかもしれません。

[arw.tyx-out_mz]

遅れてすいません！

global event busを使用したらできました！
ありがとうございます！

Answer 2

ナビゲーションガードを使用しましょう。
私は beforeEach() で、画面ごとに表示出し分けを実装しました。

https://router.vuejs.org/ja/advanced/navigation-guards.html

Comments

[arw.tyx-out_mz]

イメージがわかないです．．．

やりたいこととしては，
`App.vue`の中で`Sidebar`コンポーネントと`router-view`コンポーネントがあり，`router-view`コンポーネントのheightをその都度取得して`router-view`コンポーネントに渡すということがやりたいです．

自分の知識不足で大変申し訳ないですが，beforeEach()はrouterインスタンスを生成している場所に書くと思うので，単一ファイルコンポーネントである`App.vue`からは隔離されているのですが，
`beforeEach()`内から別ファイルの`App.vue`内の`router-view`コンポーネントにアクセスし，そこから取得した`height`を`App.vue`に渡すということは可能なのでしょうか？