fix(view): render slot with no match

posva · posva · commit 5873296ec96d · 2020-04-21T18:18:36.000+02:00
diff --git 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
@@ -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,17 +78,17 @@ 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,
         onVnodeUnmounted,
         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
