Nuxt Jsプロジェクトでページネーションを作成しようとしているので、現在のルートでページクエリパラメータのみを変更し、3つのクエリパラメータを持つ値を持つ他のクエリパラメータを保持するにはどうすればよいですか？
this.count = this.$route.query.count ?? 8
this.page = this.$route.query.page ?? 1
this.sort_by = this.$route.query.sort_by ?? 'latest'
<li class="pagination-link" v-for="(page, key) in computed.lastPage" :key="key"
:class="{ 'active': page === computed.currentPage }">
<nuxt-link :to="'?page='+page" append
:class="{'current-link' : computed.currentPage === page}">
{{ page }}
</nuxt-link>
</li>
あなたの親友- destructuring assignment。JavaScriptドキュメント。
これがあなたのケースでそれを使用する方法の例です：
let query = this.$route.query;
let newPage = 100;
this.$route.query = {...query, page: newPage};
追加の変数がないと、はるかにきれいに見えます。
this.$route.query = {...this.$route.query, page: 100};
コードの実行後、パラメーターが100にquery上書きpageされ、残りのパラメーターは変更されません。
PS。2019年11月19日に更新
コメントで述べたように、$routeオブジェクトは読み取り専用です。$router.replaceまたはに変更$router.push：
this.$router.replace({name: path_name, query: {...this.$route.query, page: 100}})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加