From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 21 Apr 2020 16:18:36 +0000 (+0200)
Subject: fix(view): render slot with no match
X-Git-Tag: v4.0.0-alpha.8~62
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5873296ec96df15f13b0cf02b685ebb36f4e0a41;p=thirdparty%2Fvuejs%2Frouter.git

fix(view): render slot with no match
---

diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts
index 1074dad0..96f6ebee 100644
--- 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 addf04ea..a88d6c3d 100644
--- 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