时间戳

首页 > 解决方案 > 路径更改时位置滚动没有改变 - vuejs

vue.js - 路径更改时位置滚动没有改变 - vuejs

问题描述

当我单击在类' select__item'的 div 中设置产品大小时，我的路线：this.$router.push({ query: { ...this.$route.query, size: value } })，没有刷新页面，只有 url 更改并滚动回顶部。当我单击产品的设置尺寸时，我希望位置滚动没有改变。谢谢你的帮助。这是我的代码：

产品.vue

<Product>
<!--some component-->
    <Sizes>
    </Sizes>

</Product>

尺寸.vue

<Sizes>
            <div class="select__items no-scrollbar">
                <div
                    v-for="size in product.sizes"
                    :key="size.id"
                    :class="['select__item', { active: size.id == currentSizeId }]"
                    :title="size.name"
                >
                    <button class="select__label" @click="currentSizeId = size.id">
                        {{ size.name }}
                    </button>
                </div>
            </div>
</Sizes>

计算的

computed: {

    currentSize() {
        return this.product.sizes.find((s) => s.id == this.currentSizeId)
    },
    currentSizeId: {
        get() {
            this.$nuxt.$emit('setsize', this.$route.query.size)
            return this.$route.query.size
        },
        set(value) {
            if (this.currentSizeId == value) {
                return
            }
            this.$router.push({ query: { ...this.$route.query, size: value } })
        },
    },
},

标签： vue.jsscrollnuxt.js

解决方案

VueJs 中的默认情况是在更改页面时保持 Yscroll 位置。

您可以更改您的 vue-router 设置以在每次更改时滚动到页面顶部；

这里有一个 StackOverflow：https ://stackoverflow.com/a/50901500/12592396

这里有一个更有竞争力的答案： https ://stackoverflow.com/a/52111880/12592396

简短的回答是在路由器上定义滚动行为：

export default new Router({
    mode: ...,
    routes: [
        ...
    ],
    scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
    }
})

推荐阅读