如何在Nuxt中實現路由更改後頁面不滾動？-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

如何在Nuxt中實現路由更改後頁面不滾動？

P粉865900994 2023-11-06 18:56:58

425

我有一個Nuxt專案。當我從http://localhost:3000/catalog/postery更改路由到http://localhost:3000/catalog/postery/all?photos[]=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 };
}

我如何在更改路由之前防止頁面滾動到頂部？

P粉865900994

全部回覆(1)

P粉1477476372023-11-07 14:51:34 1樓

所以，你確實想要：

點擊連結
開始渲染頁面
滾動到頂部

從Vue路由器的文件來看，你可以使用這樣的程式碼

/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)
  })
}

這個答案使用vue-scrollto也可能有幫助。

最後的選擇是使用一些過渡效果來隱藏醜陋的抖動/加載，這實際上可以非常吸引人。