我想在使用Nuxt进行路由切换时,始终回到页面顶部。
因此,我将其放入了我的app/router.scrollBehavior.js
文件中:
export default function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
但它总是返回到上次保存的位置(在我的控制台中始终为null
)。
你们有什么想法,我可能漏掉了什么?
我想在使用Nuxt进行路由切换时,始终回到页面顶部。
因此,我将其放入了我的app/router.scrollBehavior.js
文件中:
export default function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
但它总是返回到上次保存的位置(在我的控制台中始终为null
)。
你们有什么想法,我可能漏掉了什么?
对于 Nuxt v3.0.0-rc.3 版本:
在 middleware/
文件夹中创建名为 route.global.ts
的文件。
然后在文件中编写以下内容:
export default defineNuxtRouteMiddleware((to, from) => {
if (to.path !== from.path && process.client) {
window.scrollTo(0, 0)
}
})
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.$router.options.scrollBehavior = async (to, from, savedPosition) => {
if (to.path !== from.path && process.client) {
window.scrollTo(0, 0);
}
};
});
对于Nuxt 3
我的解决方案是在middleware
文件夹中创建一个具有以下结构的文件:
export default defineNuxtRouteMiddleware((to, from) => {
useNuxtApp().hook("page:finish", () => {
if (history.state.scroll) {
setTimeout(() => window.scrollTo(history.state.scroll), 0);
} else {
setTimeout(() => window.scrollTo(0, 0), 0);
}
});
})
我把它命名为fix-scroll-position.global.ts
。
使用setTimeout
可以避免奇怪的跳转到顶部,这意味着用户不会看到页面向顶部滚动。
这段代码片段确保在路由更改时页面滚动到顶部,并且在单击后退按钮时保留滚动位置。最后一个功能是使用history.state.scroll
实现的,它检查是否保存了来自先前路由的滚动位置。
https://nuxtjs.org/docs/configuration-glossary/configuration-router#scrollbehavior
The router.scrollBehavior.js file must be in the app folder, which in turn is in the project's root.
// app/router.options.js
export default {
scrollBehavior() {
return { top: 0 }
}
}
// app/router.options.ts
import type { RouterOptions } from '@nuxt/schema'
export default <RouterOptions> {
scrollBehavior() {
return { top: 0 }
}
}
我没有足够的声望来发表评论,因此只能回答问题。这是一个简单的提示,但我认为它可能会有所帮助。
我也曾经遇到过这个问题,一直找不到解决方法,但最终我找到了罪魁祸首。我的布局看起来像这样
<template>
<div id="page" class="flex flex-col h-screen overflow-scroll bg-white">
<Navbar />
<slot />
<Footer />
</div>
</template>
#page
div随着内容增长(即删除h-screen
和overflow-scroll
tailwind类)时,它具有向上滚动的行为,即使没有上述解决方案。This code goes in app/router.options.ts
import type {
RouterConfig
} from "nuxt/schema";
export default < RouterConfig > {
scrollBehavior(to, from, savedPosition) {
return savedPosition ?
savedPosition :
to.hash ?
{
el: to.hash
} :
{
top: 0
};
},
};
当前的默认行为已经修复了这个问题,并且表现得就像本地链接更改一样。请删除任何自定义的scrollBehavior配置并更新到最新版本的Nuxt。
/app/router.options.js
const scrollToElement = (hashElement) => {
const element = document.querySelector(hashElement);
if (element) {
let scrollMargin = 0 // default there is no scrollMargin
// read elements scrollMargin if it has one in css
const style = window.getComputedStyle(element); // Get all styles of an element
if (style.scrollMarginTop) scrollMargin = parseInt(style.scrollMarginTop);
window.scrollTo({ top: element.offsetTop - scrollMargin, behavior: "smooth" });
}
};
export default {
scrollBehavior(to, from, savedPosition) {
if (savedPosition) window.scrollTo(savedPosition);
else if (to.hash && from.path === to.path) {
scrollToElement(to.hash);
} else if (to.hash && from.path !== to.path) { // if hash is on a different page
useNuxtApp().hook("page:transition:finish", () => {
scrollToElement(to.hash);
});
}
else if (to.path !== from.path){
// Wait until the page is rendered
// Otherwise it scrolls to top when the transition starts
// before the actually page is changed
useNuxtApp().hook("page:transition:finish", () => {
window.scrollTo(0, 0);
});
}
},
};