如何在Nuxt更改路线后不向下滚动页面？ [英] How not to scroll down a page after a route change in Nuxt?

问题描述

我有Nuxt项目。当我将路由从http://localhost:3000/catalog/postery更改为http://localhost:3000/catalog/postery/all?photos%5B%5D=262时，我的页面将向上滚动到顶部，并且仅在我的路由更改之后

我的文件scroll Behavior.js：

export default async function (to, from, savedPosition) {
  
  if (
    (to.path.indexOf("/catalog/") !== -1 &&
      to.path.indexOf("/all") === -1 &&
      Object.keys(to.query).length > 0) || 
    (to.path.indexOf("/search") !== -1 && Object.keys(to.query).length > 0) || 
    (to.name === "product-type-id" && Object.keys(to.query).length > 0) || 
    (from.name === "product-type-id" &&
      to.name === "product-type-id" &&
      to.params.type != from.params.type) 
  ) {
    return;
  }

  if (to.path.indexOf("/catalog/") !== -1 && savedPosition != null) {
    return { x: 0, y: savedPosition.y };
  }

  return { x: 0, y: 0 };
}

如何在更改路线前阻止向上滚动？

推荐答案

因此，您确实希望：

• 单击链接
• 开始呈现页面
• 滚动到顶部

从Vue路由器documentation看起来您可以使用这种代码

/app/router.scrollBehavior.js

export default function () {
  return { x: 0, y: 0, behavior: 'smooth' }
}

您也可以将其设置为有条件的，或者使用setTimeout，如下所示

export default function (to, from, savedPosition) {
  if (to.path === '/my-cool-path') {
    return { x: 0, y: 0, behavior: 'smooth' }
  }
}

export default function (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0, behavior: 'smooth' })
    }, 2000)
  })
}

This answer使用vue-scrollto也可能有帮助。

最后的办法是使用一些transitions来隐藏丑陋的抖动/加载，这实际上可能非常性感。

这篇关于如何在Nuxt更改路线后不向下滚动页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！