页面路由跳转后自动回到顶部

路由跳转后页面自动回顶

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 291 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import Layout from '@/layout/index.vue';
import { addRoute } from './addRoute.demo.ts';

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/welcome'
    },
    {
      path: '/welcome',
      component: () => import('@/views/welcome/index.vue'),
      name: 'welcome',
    },
    {
      path: '/index',
      component: () => import('@/views/index/index.vue'),
      name: 'index',
    },
    {
      path: '/detail',
      component: () => import('@/views/detail/index.vue'),
      name: 'detail',
    },
    {
      path: '/search',
      component: () => import('@/views/search/index.vue'),
      name: 'search',
    },
  ],

  // ✅【新增】让路由跳转后回到顶部
  scrollBehavior(to, from, savedPosition) {
    // 如果是浏览器前进/后退，恢复上次滚动位置
    if (savedPosition) {
      return savedPosition
    }
    // 默认滚动到顶部
    return { top: 0 }
  }
});

addRoute(router);
export default router;