Vue.js+VueRouterにおける画面上部への遷移方法(スクロール方法)についてご教授ください。Serviceを読んで理解し、同意したものとみなします。スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。登録してこのコミュニティに参加するどなたでも質問していただけますどなたでも回答していただけます最もよい回答には賛成票が入り、最上位に上がりますホーム質問タグユーザーVue.js+VueRouterにおける画面上部への遷移方法(スクロール方法)についてご教授ください。1,237件0Vue.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による現在の画面を再描画する際に画面上部(トップ)のポジションで再描画する方法についてご教授いただきたく思います。「画面の再描画」とは具体的にどのようなapiをキックすればよいのでしょうか?また、どの具体的にどのタイミングで実行すればよいのか教えていただけると助かります。0:06Vueのライフサイクルです。タイミングは上部へスクロールしてから、Vueの$forceUpdate()で画面を強制的に再描画させます。0:48試してみたところ次のようになり、期待した結果とはなりませんでした。初回描画時しか呼ばれず、$router.pushによる再描画では呼び出されませんでした。textボックスに文字を入力するたび呼び出されるため、そのタイミングで画面トップへ遷移してしまいました。票0https://qiita.com/kuriya/items/f1f0a929e29bcba531efこちらのサイトを参考に、beforeRouteUpdate内でsetTimeoutを仕掛けたところ、期待した振る舞いとなりました。ありがとうございました。|回答スタック・オーバーフローに参加してくれて、ありがとうございます!質問の回答を共有してください。回答を説明し、自分の検討結果も共有してください。意見を述べること(意見を述べるなら、参照リソース、自分の経験で意見をサポートしてください)さらにサポートが必要な場合このヘルプを参考してください。“回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。質問のフィードこのRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。