[+] 路由时自动滚动到顶部

src/App.vue

@@ -21,7 +21,7 @@
                   <guest-sidebar v-if="showGuestSidebar" />
                   <main-sidebar v-if="showMainSidebar" />
                 </div>
-                <n-layout :native-scrollbar="false">
+                <n-layout-content ref="contentRef" :native-scrollbar="false">
                   <div class="content">
                     <router-view v-slot="{ Component }">
                       <keep-alive :max="10">
@@ -35,7 +35,7 @@
                   </div>
                   <n-divider />
                   <the-footer />
-                </n-layout>
+                </n-layout-content>
               </n-layout>
             </n-layout>
           </n-notification-provider>
@@ -74,7 +74,7 @@ import api from '@/api'
 import { sendWarningMessage } from '@/utils/message'
 import { logout } from '@/utils/profile'
 import router from '@router'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 // 手机状态下收缩菜单栏
 const collapsed = ref(true)
@@ -84,17 +84,23 @@ if (document.body.clientWidth >= 1000) {
 
 const osThemeRef = useOsTheme()
 const route = useRoute()
+const vRouter = useRouter()
 const theme = computed(() => (osThemeRef.value === 'dark' ? darkTheme : null))
 // let initFinished = false
 
 const loading = ref(true)
 const tokenValid = ref(false)
 const showGuestSidebar = ref(false)
 const showMainSidebar = ref(false)
+const contentRef = ref(null)
 
 hljs.registerLanguage('ini', ini)
 hljs.registerLanguage('nginx', nginx)
 
+vRouter.afterEach(() => {
+  contentRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+})
+
 // function getMessage(e) {
 //   const rs = JSON.parse(e.data)
 //   // 通知

src/components/sidebar/GuestSidebar.vue

@@ -7,7 +7,7 @@
     @expand="collapsed = false"
     collapse-mode="width"
     :collapsed-width="64"
-    :native-scrollbar="true"
+    :native-scrollbar="false"
     id="sider"
     style="height: 100%; bottom: 0"
   >

src/components/sidebar/MainSidebar.vue

@@ -7,8 +7,7 @@
     @expand="collapsed = false"
     collapse-mode="width"
     :collapsed-width="64"
-    :native-scrollbar="true"
-    :inverted="false"
+    :native-scrollbar="false"
     id="sider"
     style="height: 100%; bottom: 0"
   >

src/router/index.js

@@ -284,13 +284,7 @@ const routes = [
 
 const router = createRouter({
   history: createWebHistory(),
-  routes,
-  scrollBehavior(to, from, savedPosition) {
-    return {
-      top: 0,
-      behavior: 'smooth'
-    }
-  }
+  routes
 })
 
 // // 检查本地存储是否存在token，若存在则直接使用