前提・実現したいこと
Nuxt.jsで無限スクロールによるページ送りを実装しようとしており、次のページが読み込まれたら page=2
、page=3
という感じでURLに動的にクエリパラメーターを変更させようとしています。
例えば /
からリンクから /blogs
に遷移し、スクロールによって無限スクロールによるページングを発火させ、 /blogs?page=2
にURLを変更させます。
発生している問題
上記のケースで /blogs?page=2
の状態からブラウザの戻るボタンをクリックした場合、 /blogs
に遷移してしまうという問題があります。
この場合、 /
にブラウザバックしたいと考えています。
該当のソースコード
コンポーネントの <script>
内の watch
でthis.pageの値が変わったら、 this.$router.push()
を発火させて、クエリパラメーターの変更を行っています。
無限スクロールのメソッドである infiniteHandler()
の中で this.page++
している、という実装になっています
data() { return { page: 1, } }, watch: { page: function() { this.$router.push({ path: this.$route.path, query: { page: this.page } }) } }, methods: { infiniteHandler() { ~~~ 略 ~~~ } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。