前提・実現したいこと
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>
が変化するたびに実行したいです.
どのフックを使用すればいいかご教示お願いします.
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/01 09:25
2018/04/01 10:27
2018/04/01 10:35
2018/04/01 11:27
2018/04/01 12:30
2018/04/01 12:59
2018/04/03 10:54