vue项目页面刷新是为什么页面会回到顶部

Vue项目页面刷新后，页面会回到顶部的原因是浏览器刷新时会重新加载页面，所有的状态都会被重置。因此，浏览器会将页面滚动位置重置为顶部。

要解决这个问题，可以使用浏览器的本地存储（Local Storage）或者Session Storage来保存页面的滚动位置。在页面加载时，可以从本地存储中读取滚动位置并将页面滚动到该位置。这样可以避免页面刷新后滚动位置被重置的问题。

例如，在Vue中可以使用`window.localStorage`来保存和读取滚动位置：

// 保存滚动位置
window.localStorage.setItem('scrollPosition', window.pageYOffset);

// 读取滚动位置并滚动到该位置
const scrollPosition = window.localStorage.getItem('scrollPosition');
if (scrollPosition) {
  window.scrollTo(0, parseInt(scrollPosition));
}

在Vue中也可以使用Vue Router的`scrollBehavior`选项来控制页面切换时的滚动行为，并在页面刷新时恢复滚动位置：

const router = new VueRouter({
  mode: 'history',
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

// 在页面刷新时恢复滚动位置
router.beforeEach((to, from, next) => {
  const scrollPosition = window.localStorage.getItem('scrollPosition');
  if (scrollPosition) {
    window.scrollTo(0, parseInt(scrollPosition));
    window.localStorage.removeItem('scrollPosition');
  }
  next();
});

router.afterEach((to, from) => {
  // 保存滚动位置
  window.localStorage.setItem('scrollPosition', window.pageYOffset);
});

这样，在页面刷新时会从本地存储中读取滚动位置并将页面滚动到该位置。在页面切换时也会保存滚动位置，以便在页面返回时可以恢复滚动位置。