vue 切换页面返回顶部

在 Vue 中，为了实现切换页面并自动滚动到顶部，你可以创建一个自定义指令或者在路由守卫中处理。这里提供两个方法：

1. 自定义指令 (`v-top`)：

   Vue.directive('top', {
     inserted: function (el) {
       el.scrollIntoView({ behavior: 'smooth' });
     }
   });

   <!-- 在模板中使用 -->
   <router-link v-top>跳转到另一个页面</router-link>

当这个链接被激活时，它会平滑地将视图滚动到顶部。

2. 路由守卫 (`beforeRouteLeave`):

   export default {
     beforeRouteLeave(to, from, next) {
       window.scrollTo(0, 0); // 页面离开时滚动到顶部
       next();
     }
   };

在路由离开当前页面时，会自动滚动回到页面顶部。

相关问题

vue3路由跳转返回顶部

在Vue.js中，可以通过配置路由的`scrollBehavior`属性来实现路由跳转返回顶部的效果。具体的实现方式如下所示：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { top: 0 };
  }
});

export default router;

在上述代码中，我们使用了`createRouter`函数创建了一个路由实例，并通过`createWebHistory`函数创建了一个基于浏览器历史记录的路由模式。然后，我们通过`scrollBehavior`属性定义了一个函数，该函数在每次路由切换时会被调用。在这个函数中，我们返回了一个包含`top`属性的对象，将页面滚动到顶部。

需要注意的是，上述代码是基于Vue 3版本的写法。如果你使用的是Vue 2版本，可以参考引用中的代码来实现路由跳转返回顶部的效果。

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

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