feat(router): 添加路由切换后页面滚动到顶部的功能
在路由配置中添加了 `scrollBehavior` 方法,确保每次路由切换后页面滚动到顶部,提升用户体验。
Showing
1 changed file
with
6 additions
and
2 deletions
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-04-17 14:26:17 | 2 | * @Date: 2025-04-17 14:26:17 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-04-21 15:07:36 | 4 | + * @LastEditTime: 2025-04-21 15:36:27 |
| 5 | * @FilePath: /mlaj-reading-club/src/main.js | 5 | * @FilePath: /mlaj-reading-club/src/main.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -30,7 +30,11 @@ const router = createRouter({ | ... | @@ -30,7 +30,11 @@ const router = createRouter({ |
| 30 | { path: '/check-in/:id', component: () => import('./pages/CheckIn.vue') }, | 30 | { path: '/check-in/:id', component: () => import('./pages/CheckIn.vue') }, |
| 31 | { path: '/messages', component: () => import('./pages/Messages.vue') }, | 31 | { path: '/messages', component: () => import('./pages/Messages.vue') }, |
| 32 | { path: '/:pathMatch(.*)*', redirect: '/' } | 32 | { path: '/:pathMatch(.*)*', redirect: '/' } |
| 33 | - ] | 33 | + ], |
| 34 | + scrollBehavior(to, from, savedPosition) { | ||
| 35 | + // 每次路由切换后,页面滚动到顶部 | ||
| 36 | + return savedPosition || { top: 0, left: 0 } | ||
| 37 | + }, | ||
| 34 | }) | 38 | }) |
| 35 | app.use(router) | 39 | app.use(router) |
| 36 | 40 | ... | ... |
-
Please register or login to post a comment