修改路由切换初始化滚动条方法，让他显得没那么蠢

src/appConfig/routerConfig.ts

@@ -11,5 +11,14 @@
 
 /** vue-router 相关配置入口 */
 
+import type { LayoutInst } from 'naive-ui'
+
 /** 路由切换容器区域 id 配置 */
 export const viewScrollContainerId = 'rayLayoutContentWrapperScopeSelector'
+
+/**
+ *
+ * 内容区域 ref 注册
+ * 可以控制内容区域当前滚动位置
+ */
+export const LAYOUT_CONTENT_REF = ref<LayoutInst>()

src/layout/index.tsx

@@ -16,7 +16,10 @@ import ContentWrapper from '@/layout/default/ContentWrapper'
 import FooterWrapper from '@/layout/default/FooterWrapper'
 
 import { useSetting, useMenu } from '@/store'
-import { viewScrollContainerId } from '@/appConfig/routerConfig'
+import {
+  viewScrollContainerId,
+  LAYOUT_CONTENT_REF,
+} from '@/appConfig/routerConfig'
 
 const Layout = defineComponent({
   name: 'Layout',
@@ -53,6 +56,7 @@ const Layout = defineComponent({
       modelMenuTagSwitch,
       cssVarsRef,
       isLock,
+      LAYOUT_CONTENT_REF,
     }
   },
   render() {
@@ -68,6 +72,7 @@ const Layout = defineComponent({
               <SiderBar />
               {this.modelMenuTagSwitch ? <MenuTag /> : ''}
               <NLayoutContent
+                ref="LAYOUT_CONTENT_REF"
                 class="layout-content__router-view"
                 nativeScrollbar={false}
                 {...{ id: viewScrollContainerId }}

src/router/README.md

@@ -8,6 +8,7 @@ interface RouteMeta {
   role?: string[]
   hidden?: boolean
   noLocalTitle?: string | number
+  ignoreAutoResetScroll?: boolean
 }
 ```
 
@@ -16,8 +17,9 @@ interface RouteMeta {
 ```
 i18nKey: i18n 国际化 key, 会优先使用该字段
 icon: icon 图标, 用于 Menu 菜单(依赖 RayIcon 组件实现)
-windowOpen: 超链接打开
+windowOpen: 超链接打开（新开窗口打开）
 role: 权限表
 hidden: 是否显示
 noLocalTitle: 不使用国际化渲染 Menu Titile
+ignoreAutoResetScroll: 该页面内容区域自动初始化滚动条位置
 ```

src/router/type.ts

@@ -9,14 +9,14 @@ export type Component<T = any> =
   | (() => Promise<typeof import('*.vue')>)
   | (() => Promise<T>)
 
-export interface AppRouteMeta extends IUnknownObjectKey {
+export interface AppRouteMeta {
   i18nKey?: string
   icon?: string
   windowOpen?: string
   role?: string[]
   hidden?: boolean
   noLocalTitle?: string | number
-  ignoreResetScroll?: boolean
+  ignoreAutoResetScroll?: boolean
 }
 
 // @ts-ignore

src/router/utils/viewScrollTop.ts

@@ -1,5 +1,4 @@
-import { getElement } from '@/utils/element'
+import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
-import { viewScrollContainerId } from '@/appConfig/routerConfig'
 
 import type { RouteLocationNormalized } from 'vue-router'
 
@@ -8,28 +7,18 @@ import type { RouteLocationNormalized } from 'vue-router'
  * 切换路由时, 手动将容器区域回归默认值
  *
  * 由于官方不支持这个方法了, 所以自己手写了一个
- * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreResetScroll 属性即可
+ * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreAutoResetScroll 属性即可
- *
- * 找到滚动元素容器的写法有点丑陋, 暂时也想不到啥好方法解决, 就凑合一下吧
  */
 const scrollViewToTop = (route: RouteLocationNormalized) => {
   const { meta } = route
 
   /** 这个 id 是注入在 layout 中 */
-  if (!meta?.ignoreResetScroll) {
+  if (!meta?.ignoreAutoResetScroll) {
-    const scrollViewRoot = getElement(`#${viewScrollContainerId}`)?.[0]
+    LAYOUT_CONTENT_REF.value?.scrollTo({
-
+      top: 0,
-    if (scrollViewRoot && typeof scrollViewRoot.scroll) {
+      left: 0,
-      /** 找到 NLayoutContent 组件滚动元素 */
+      behavior: 'smooth',
-      const scrollView = scrollViewRoot?.firstElementChild
+    })
-        ?.firstChild as HTMLElement
-
-      scrollView?.scroll({
-        top: 0,
-        left: 0,
-        behavior: 'smooth',
-      })
-    }
   }
 }