fix(router-view): render the slot when there is no match

Close #385

diff --git a/e2e/specs/transitions.js b/e2e/specs/transitions.js
index 4909b63e64961a730c9fd7c392a5f0be9aa27526..e5e7954656c5a5b0ff8cfc1a93725c4e76fdce10 100644 (file)
--- a/e2e/specs/transitions.js
+++ b/e2e/specs/transitions.js
@@ -43,6 +43,12 @@ module.exports = {
       .assert.cssClassPresent('.view.home', 'fade-enter-active')
       .waitForElementNotPresent('.view.home.fade-enter-active', TIMEOUT)
 
+      .click('li:nth-child(5) a')
+      .assert.cssClassPresent('.view.home', 'fade-leave-active')
+      .waitForElementNotPresent('.view.home', TIMEOUT)
+      .click('li:nth-child(2) a')
+      .assert.cssClassPresent('.view.parent', 'fade-enter-active')
+
       .end()
   },
 }

diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts
index 153567248b6571f92f2686fa4d6f943515f30382..9a4dc9ca45be94971c8388ca3bdc2d2b778eef9c 100644 (file)
--- a/e2e/transitions/index.ts
+++ b/e2e/transitions/index.ts
@@ -47,7 +47,7 @@ const Parent: RouteComponent = {
     <div class="parent">
       <h2>Parent</h2>
       {{ transitionName }}
-      <router-view class="child-view" v-slot="{ Component }">
+      <router-view class="child-view" v-slot="{ Component, route }">
         <transition :name="transitionName">
           <component :is="Component" />
         </transition>
@@ -95,6 +95,7 @@ const app = createApp({
         <li><router-link to="/parent">/parent</router-link></li>
         <li><router-link to="/parent/foo">/parent/foo</router-link></li>
         <li><router-link to="/parent/bar">/parent/bar</router-link></li>
+        <li><router-link to="/not-found">Not existing</router-link></li>
       </ul>
       <router-view class="view" v-slot="{ Component }">
         <transition name="fade" mode="out-in">

diff --git a/src/RouterView.ts b/src/RouterView.ts
index 0b15686ab7d3e933b3e7e731a1a77abc4f804bec..39afae54de8ba4d83ac8b2c6d583508785d12674 100644 (file)
--- a/src/RouterView.ts
+++ b/src/RouterView.ts
@@ -38,10 +38,10 @@ export const RouterViewImpl = defineComponent({
   setup(props, { attrs, slots }) {
     __DEV__ && warnDeprecatedUsage()
 
-    const route = inject(routeLocationKey)!
+    const injectedRoute = inject(routeLocationKey)!
     const depth = inject(viewDepthKey, 0)
     const matchedRouteRef = computed(
-      () => (props.route || route).matched[depth]
+      () => (props.route || injectedRoute).matched[depth]
     )
 
     provide(viewDepthKey, depth + 1)
@@ -50,14 +50,14 @@ export const RouterViewImpl = defineComponent({
     const viewRef = ref<ComponentPublicInstance>()
 
     return () => {
+      const route = props.route || injectedRoute
       const matchedRoute = matchedRouteRef.value
-      if (!matchedRoute) {
-        return null
-      }
+      const ViewComponent = matchedRoute && matchedRoute.components[props.name]
 
-      const ViewComponent = matchedRoute.components[props.name]
       if (!ViewComponent) {
-        return null
+        return slots.default
+          ? slots.default({ Component: ViewComponent, route })
+          : null
       }
 
       // props from route configration
@@ -97,7 +97,7 @@ export const RouterViewImpl = defineComponent({
         // pass the vnode to the slot as a prop.
         // h and <component :is="..."> both accept vnodes
         slots.default
-          ? slots.default({ Component: component, route: matchedRoute })
+          ? slots.default({ Component: component, route })
           : component
       )
     }