feat(BetterRouterView)!: 完整支持原生 RouterView 插槽组件模板引用方式

通过 `Proxy` 完整支持原生 `RouterView` 插槽组件模板引用方式，不再需要二次导出 `inner` 属性，且同时移除 `viewKey` 属性。

Author: l246804

play/src/layout/index.vue

@@ -46,7 +46,7 @@ watch(
     :sidebar-props="{ routes }"
   >
     <BetterRouterView
-      v-slot="{ route, Component: viewComponent }"
+      v-slot="{ Component: viewComponent }"
       :resolve-view-key
     >
       <KeepAlive :include="[...keepAliveValues]">

play/src/views/List.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { keepAliveValues } from '@/stores/keepAlive'
 
 const details = ref<{ time: number }[]>([])
@@ -19,6 +19,10 @@ function gotoDetail(
   }
   router.push(fullPath)
 }
+
+defineExpose({
+  test: useRoute().fullPath,
+})
 </script>
 
 <template>

play/src/views/List2.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { keepAliveValues } from '@/stores/keepAlive'
 
 const details = ref<{ time: number }[]>([])
@@ -19,6 +19,10 @@ function gotoDetail(
   }
   router.push(`${path}?time=${item.time}`)
 }
+
+defineExpose({
+  test: useRoute().fullPath,
+})
 </script>
 
 <template>

play/src/views/ListDetail.vue

@@ -5,6 +5,10 @@ const route = useRoute()
 const receiveTime = new Date(+route.query.time!).toLocaleString()
 const currentTime = new Date().toLocaleString()
 const isEquals = receiveTime === currentTime
+
+defineExpose({
+  test: route.fullPath,
+})
 </script>
 
 <template>

src/BetterRouterView.ts

@@ -59,7 +59,15 @@ export const BetterRouterView: new () => {
             inheritAttrs: false,
             setup(_, { attrs, slots, expose }) {
               const inner$: ShallowRef<any> = shallowRef()
-              expose({ inner: inner$, viewKey: name })
+              expose(
+                new Proxy(
+                  {},
+                  {
+                    get: (t, p) => Reflect.get(inner$.value || t, p),
+                    has: (t, p) => Reflect.get(inner$.value || t, p),
+                  },
+                ),
+              )
               return () => h(viewComponent, { ...attrs, ref: inner$ }, slots)
             },
           }),