feat(useExactView): 提取 BetterRouterView 的精准渲染功能到独立 hooks 中

- 新增 useExactView 钩子函数，用于自定义视图匹配逻辑
- 扩展 exact 属性支持 number 类型，用于指定匹配的路由层级
- 重构 BetterRouterView 组件，使用新的钩子函数实现视图匹配

Author: l246804

src/BetterRouterView.ts

@@ -7,21 +7,14 @@ import type {
 } from 'vue'
 import type {
   RouteComponent,
+  RouteLocationMatched,
   RouteLocationNormalizedLoaded,
   RouteLocationNormalizedLoadedGeneric,
   RouterViewProps,
 } from 'vue-router'
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  inject,
-  provide,
-  shallowRef,
-  toValue,
-} from 'vue'
-import { RouterView, useRoute, viewDepthKey } from 'vue-router'
+import { computed, defineComponent, getCurrentInstance, h, shallowRef } from 'vue'
+import { RouterView } from 'vue-router'
+import { useExactView } from './hooks/use-exact-view'
 import { getWrappers } from './wrappers'
 
 export interface SlotData {
@@ -33,28 +26,26 @@ export type ResolveViewKey = (
   route: RouteLocationNormalizedLoaded,
 ) => string | void | undefined | null
 
+export type ExactFn = (matchedRoute: RouteLocationMatched) => boolean
+
 export interface BetterRouterViewProps extends RouterViewProps {
   resolveViewKey?: ResolveViewKey
-  exact?: boolean
+  exact?: boolean | number | null
 }
 
-export const BetterRouterView: new () => {
-  $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & BetterRouterViewProps
-  $slots: {
-    default?: (data: SlotData) => VNode[]
-  }
-} = /* #__PURE__ */ defineComponent({
+const BetterRouterViewImpl = /* #__PURE__ */ defineComponent({
   name: 'BetterRouterView',
   inheritAttrs: false,
   props: {
     resolveViewKey: {
       type: Function,
     },
     exact: {
-      type: Boolean,
+      type: [Boolean, Number, null],
+      default: null,
     },
   },
-  setup(props: BetterRouterViewProps, { attrs, slots }) {
+  setup(props, { attrs, slots }) {
     const app = getCurrentInstance()!.appContext.app
     const wrappers = getWrappers(app)
 
@@ -89,13 +80,9 @@ export const BetterRouterView: new () => {
       return wrappers.get(name)!
     }
 
-    const route = useRoute()
-    const viewDepth = inject(viewDepthKey, 0)
-    provide(
-      viewDepthKey,
-      // route.matched 最后一个往往就是精确匹配的，这里更改 viewDepth 后可以让其直接渲染对应的视图组件
-      computed(() => (props.exact ? route.matched.length - 1 : toValue(viewDepth))),
-    )
+    useExactView({
+      exact: computed(() => props.exact),
+    })
 
     return () =>
       h(RouterView, attrs, {
@@ -112,3 +99,10 @@ export const BetterRouterView: new () => {
       })
   },
 })
+
+export const BetterRouterView = BetterRouterViewImpl as new () => {
+  $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & BetterRouterViewProps
+  $slots: {
+    default?: (data: SlotData) => VNode[]
+  }
+}

src/hooks/use-exact-view.ts

@@ -0,0 +1,36 @@
+import type { MaybeRefOrGetter, Reactive } from 'vue'
+import { computed, inject, provide, toValue } from 'vue'
+import { useRoute, viewDepthKey } from 'vue-router'
+import { isBoolean } from '../utils'
+
+export interface UseExactViewOptions {
+  /**
+   * 是否精准匹配当前路由的视图，必须在包含 `<RouterView>` 的所属组件 `setup()` 内调用
+   * - boolean: 设为 `true` 时将精准匹配当前路由的视图，且在调用该函数的组件下所有视图组件将**无法再嵌套** `<RouterView>`！
+   * - number: 设置为数字时，将精准匹配对应路由的视图，且在调用该函数的组件下所有视图组件**支持再嵌套** `<RouterView>`！
+   * - null: 默认值，将还原 `<RouterView>` 渲染逻辑
+   */
+  exact: MaybeRefOrGetter<boolean | number | null>
+}
+
+export function useExactView(options: UseExactViewOptions | Reactive<UseExactViewOptions>): void {
+  const route = useRoute()
+  const viewDepth = inject(viewDepthKey, 0)
+  provide(
+    viewDepthKey,
+    computed(() => {
+      const exactValue = toValue(options.exact)
+      const viewDepthValue = toValue(viewDepth)
+
+      if (exactValue == null) {
+        return viewDepthValue
+      }
+
+      if (isBoolean(exactValue)) {
+        return exactValue ? route.matched.length - 1 : viewDepthValue
+      }
+
+      return route.matched[exactValue] ? exactValue : viewDepthValue
+    }),
+  )
+}

src/index.ts

@@ -2,6 +2,7 @@ import type { App, ObjectPlugin } from 'vue'
 import { BetterRouterView as Component } from './BetterRouterView'
 
 export * from './BetterRouterView'
+export * from './hooks/use-exact-view'
 
 const BetterRouterView: typeof Component & ObjectPlugin = /* #__PURE__ */ Object.assign(Component, {
   install(app: App) {

src/utils.ts

@@ -0,0 +1,11 @@
+export function isFunction(value: any): value is (...args: any[]) => any {
+  return typeof value === 'function'
+}
+
+export function isNumber(value: any): value is number {
+  return typeof value === 'number'
+}
+
+export function isBoolean(value: any): value is boolean {
+  return typeof value === 'boolean'
+}