48160


Vue.js+VueRouterの画面制御についてです。

$router.pushを用いて画面の再描画を行っています。  
ここでいう画面の再描画とは、マニュアルの「パラメーター変更の検知」に記載されている内容と似たような振る舞いです。  
<https://router.vuejs.org/ja/guide/essentials/dynamic-
matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5>

例をあげますと「更新画面にて、更新ボタン押下後に、更新内容で現在の画面を再描画する」といった振る舞いになります。

期待していた動作としては、スクロール後の画面下部でイベント発火した場合でも、$router.pushによる再描画により画面上部(トップ)で再描画されることでした。  
ですが、実際に再描画した際の位置はイベント発火したスクロール後の画面下部となりました。

考えたところとしては、$router.pushを用いた方法では、マニュアルに記載されているように「同じコンポーネントインスタンスが再利用」されているため再描画のポジションが保持されてしまっているのではないか、と考えています。

また試した内容としては、vueのライフサイクル(moutedやupdatedなど)や、VueRouterのナビゲーションガード(beforeRouteUpdateやbeforeRouteEnterなど)にて、window.scrollTo(0,0)を試してみました。  
ですが一瞬上部(トップ)で表示されたあと画面下部へ遷移してしまいました。  
なんらかのデータで上書きされてしまっているように感じています。

つきましては、$router.pushによる現在の画面を再描画する際に画面上部(トップ)のポジションで再描画する方法についてご教授いただきたく思います。


CC BY-SA 4.0
2018-09-03T15:06:36.313
48059
2018-09-07T00:23:52.573
2018-09-07T00:20:53.950
question
javascript vue.js
Vue.js+VueRouterにおける画面上部への遷移方法(スクロール方法)についてご教授ください。


<https://qiita.com/kuriya/items/f1f0a929e29bcba531ef>  
こちらのサイトを参考に、beforeRouteUpdate内でsetTimeoutを仕掛けたところ、期待した振る舞いとなりました。  
ひとまず解決といたします。ありがとうございました。


CC BY-SA 4.0
2018-09-07T00:23:52.573
48160
2018-09-07T00:23:52.573
48059
answer