通常当前页面滑到底部我们点击进行跳转时，我们希望跳转后的页面是在顶部而不是跟之前页面一样的位置，也就是说路由跳转后我们希望页面自动回到顶部。


但是最近做的这个vue3+nuxt的项目，路由跳转时不会自动回到顶部，这个问题我找了挺长时间，但是找到的结果都是不尽人意，试了很多种跳转后的页面都不能回到顶部，现在问题终于解决了，大家如果遇到类似问题可以做个参考。

踩了很多坑，然后还是同事帮忙看的，最有用的果然还是官方文档啊！贴文档

路由中间件是接收当前路由和下一个路由作为参数的导航守卫。

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  return navigateTo('/')
})

示例：命名路由中间件

-| middleware/
---| auth.ts

在你的页面文件中，你可以引用这个路由中间件

<script setup>
definePageMeta({
  middleware: ["auth"]
  // or middleware: 'auth'
})
</script>

看到这，大家是不是有点思路了，由于我们实在没想到好的解决办法，所以决定拿到页面滚动的那个dom元素，用路由中间件直接将dom滑到顶部

1.src下新建一个middleware的文件夹，然后建一个auth.ts文件

export default defineNuxtRouteMiddleware((to, from) => {
  const body = document.querySelector('.body-container')
  console.log(body, 'body##')
  if (body) {
    body.scrollTo({
      top: 0
    })
  }
})

2.在你的页面文件（要滚动到顶部的页面）中，你可以引用这个路由中间件 

<script setup> 
definePageMeta({ 
    middleware: ["auth"]  
    // or middleware: 'auth' 
}) 
</script>

即拿到页面滚动的body,直接body.scrollTo({top:0}),然后在你的页面文件中，你可以引用这个路由中间件，直接暴力但是亲测有效！

有什么更好的方法可以讨论！