vuejs-paginate - 按下導航欄品牌時切換到第 1 頁活動 class

Question

我正在使用這個名為vuejs-paginate 的方便的分頁工具，當我單擊每個單獨的頁面項目時，它在功能方面工作得很好，但是當我按下導航欄品牌（切換到第 1 頁）時，分頁工具不會切換活動 class 到第 1 頁，活動 class 只保留在您之前所在的頁面上。

這是我的分頁代碼：

<template>
    <section role="region" class="paginate py-md-5 py-4" id="paginate">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <paginate
                        :page-count="20"
                        :click-handler="clickCallback"
                        :prev-text="'<'"
                        :next-text="'>'"
                        :container-class="'pagination'"
                        :page-class="'page-item'"
                        :page-link-class="'page-link'"
                        :next-class="'page-item'"
                        :next-link-class="'page-link'"
                        :prev-class="'page-item'"
                        :prev-link-class="'page-link'"
                        class="justify-content-center mb-0"
                    >
                    </paginate>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    methods: {
        clickCallback(pageNum) {
            this.$router.push({
                path: `/page/${pageNum}`
            })
        }
    }
}
</script>

<style lang="scss">

</style>

在單擊導航欄品牌時，我正在考慮使用某種方式以編程方式單擊分頁的第一頁項目，但我不知道如何實現這一點。 謝謝您的幫助！

Answer 1

經過大量調試，我發現它實際上是我放置分頁組件的地方。 在我的 Nuxt 應用程序中，我把它放在了 default layouts中。 這意味着當我點擊導航欄品牌到 go 到第一頁時，分頁沒有重新安裝。 所以我為解決這個問題所做的就是將我的分頁組件轉移到它的各個頁面。 現在，當我從一個路由切換到另一個路由時，活動的 class 將發生變化，因為分頁組件會重新安裝以對更改做出反應。