nuxt跳转不会回到顶部
时间: 2023-10-12 07:05:14 浏览: 236
在 Nuxt 中,可以使用 `nuxt-link` 或者 `this.$router.push` 进行路由跳转。在进行路由跳转时,可以使用 `scrollToTop` 选项来自动回到页面顶部。
使用 `nuxt-link`:
```html
<nuxt-link to="/" :scroll-to-top="true">Home</nuxt-link>
```
使用 `this.$router.push`:
```javascript
this.$router.push({
path: '/',
query: {},
scrollToTop: true
})
```
如果你使用的是旧版本的 Nuxt(v1.x),则需要在 `nuxt.config.js` 中添加以下代码:
```javascript
export default {
router: {
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
} else if (to.matched.some(m => m.meta.scrollToTop)) {
return {
x: 0,
y: 0
}
} else if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
}
}
}
```
然后在需要回到页面顶部的路由中添加 `scrollToTop: true`:
```javascript
export default {
meta: {
scrollToTop: true
}
}
```
希望以上内容能够帮助到你。
阅读全文