feat: ✨ Enhanced scroll behavior for Vue Router v4

package.json

@@ -29,7 +29,8 @@
     "vant": "^4.2.0",
     "vconsole": "^3.15.0",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vue-router-better-scroller": "^0.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.33.1",

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { createRouterScroller } from 'vue-router-better-scroller'
 import App from './App.vue'
 import router from './router'
 
@@ -24,8 +25,16 @@ const app = createApp(App)
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 
-app
-  .use(router)
-  .use(pinia)
+app.use(router)
+app.use(pinia)
+
+// 增强了 Vue Router v4 的滚动行为
+app.use(createRouterScroller({
+  selectors: {
+    'window': true,
+    'body': true,
+    '.scrollable': true,
+  },
+}))
 
 app.mount('#app')

src/router/index.ts

@@ -32,10 +32,6 @@ const routes = [
 const router = createRouter({
   history: createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
   routes,
-  scrollBehavior() {
-    // 始终滚动到顶部
-    return { top: 0 }
-  },
 })
 
 router.beforeEach((_to, _from, next) => {