在 Nuxt 中更改路线后如何不向下滚动页面？

Posted 2023-02-22

【中文标题】在 Nuxt 中更改路线后如何不向下滚动页面？

【英文标题】：How not to scroll down a page after a route change in Nuxt?

【发布时间】：2021-10-19 04:48:13

【问题描述】：

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

我的文件 scrollBehavior.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 ;

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

【问题讨论】：

那么，如果你不想向上滚动，你想要什么？在下一页上保持相同的滚动水平？这种行为的目的和目标是什么？

@kissu 我希望我的当前页面在我的路线改变之前不要向上滚动。我想在去新路线之前保存我的位置

【参考方案1】：

所以，你确实想要：

点击链接 开始渲染页面 滚动到顶部

来自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 来隐藏丑陋的抖动/加载，这实际上可以很性感。

【讨论】：

新的 Promise 帮助了我