fix(view): render slot with no match

diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts
index 1074dad0762dfdd78b0b517ab937fffb79414ccf..96f6ebee4657d6fb15d27a9ede578c7dc19e9ea5 100644 (file)
--- a/e2e/transitions/index.ts
+++ b/e2e/transitions/index.ts
@@ -80,7 +80,7 @@ const app = createApp({
       </ul>
       <router-view class="view" v-slot="{ Component, props }">
         <transition name="fade" mode="out-in">
-          <component :is="Component" v-bind="props"></component>
+          <component v-if="Component" :is="Component" v-bind="props"></component>
         </transition>
       </router-view>
     </div>

diff --git a/src/components/View.ts b/src/components/View.ts
index addf04ea8b43a9f16299de020856f1378e93afba..a88d6c3df60d9063641196e4554ed3f9f98e4d86 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -44,7 +44,8 @@ export const View = (defineComponent({
     )
 
     const propsData = computed(() => {
-      // propsData only gets called if ViewComponent.value exists and it depends on matchedRoute.value
+      // propsData only gets called if ViewComponent.value exists and it depends
+      // on matchedRoute.value
       const { props } = matchedRoute.value!
       if (!props) return {}
       if (props === true) return route.value.params
@@ -77,6 +78,7 @@ export const View = (defineComponent({
 
       let Component = ViewComponent.value
       const componentProps: Parameters<typeof h>[1] = {
+        // only compute props if there is a matched record
         ...(Component && propsData.value),
         ...attrs,
         onVnodeMounted,
@@ -84,10 +86,9 @@ export const View = (defineComponent({
         ref: viewRef,
       }
 
+      // NOTE: we could also not render if there is no route match
       const children =
-        Component &&
-        slots.default &&
-        slots.default({ Component, props: componentProps })
+        slots.default && slots.default({ Component, props: componentProps })
 
       return children
         ? children