From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 20 Apr 2020 21:32:24 +0000 (+0200)
Subject: docs: add named views playground
X-Git-Tag: v4.0.0-alpha.8~66
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b7d030e5b18c35be4f6ac03dddfe9f5ae4dee890;p=thirdparty%2Fvuejs%2Frouter.git

docs: add named views playground
---

diff --git a/playground/App.vue b/playground/App.vue
index bd763a02..ce9a7626 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -128,26 +128,29 @@
         <router-link to="/p_1/absolute-a">/p_1/absolute-a</router-link>
       </li>
     </ul>
-    <!-- <transition
-      name="fade"
-      mode="out-in"
-      @before-enter="flushWaiter"
-      @before-leave="setupWaiter"
-    > -->
+    <button @click="toggleViewName">Toggle view</button>
     <Suspense>
       <template #default>
-        <router-view></router-view>
+        <router-view :name="viewName" v-slot="{ Component, props }">
+          <!-- <transition
+            name="fade"
+            mode="out-in"
+            @before-enter="flushWaiter"
+            @before-leave="setupWaiter"
+          > -->
+          <component :is="Component" v-bind="props" />
+          <!-- </transition> -->
+        </router-view>
       </template>
       <template #fallback>
         Loading...
       </template>
     </Suspense>
-    <!-- </transition> -->
   </div>
 </template>
 
 <script>
-import { defineComponent, inject, computed } from 'vue'
+import { defineComponent, inject, computed, ref } from 'vue'
 import { scrollWaiter } from './scrollWaiter'
 import { useRoute } from '../src'
 
@@ -156,6 +159,7 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const state = inject('state')
+    const viewName = ref('default')
 
     const currentLocation = computed(() => {
       const { matched, ...rest } = route
@@ -179,6 +183,10 @@ export default defineComponent({
       state,
       flushWaiter,
       setupWaiter,
+      viewName,
+      toggleViewName() {
+        viewName.value = viewName.value === 'default' ? 'other' : 'default'
+      },
     }
   },
 })
diff --git a/playground/router.ts b/playground/router.ts
index ba8bfaec..65d7ba79 100644
--- a/playground/router.ts
+++ b/playground/router.ts
@@ -5,7 +5,10 @@ import NestedWithId from './views/NestedWithId.vue'
 import Dynamic from './views/Dynamic.vue'
 import User from './views/User.vue'
 import NotFound from './views/NotFound.vue'
-import component from './views/Generic.vue'
+const component = () => {
+  console.log('fetching component')
+  return import('./views/Generic.vue')
+}
 import LongView from './views/LongView.vue'
 import GuardedWithLeave from './views/GuardedWithLeave.vue'
 import ComponentWithData from './views/ComponentWithData.vue'
@@ -13,14 +16,16 @@ import { globalState } from './store'
 import { scrollWaiter } from './scrollWaiter'
 let removeRoute: (() => void) | undefined
 
-// const hist = new HTML5History()
-// const hist = new HashHistory()
 export const routerHistory = createWebHistory()
 export const router = createRouter({
   history: routerHistory,
   routes: [
     { path: '/home', redirect: '/' },
-    { path: '/', component: Home },
+    {
+      path: '/',
+      components: { default: Home, other: component },
+      props: to => ({ waited: to.meta.waitedFor }),
+    },
     {
       path: '/always-redirect',
       redirect: () => ({
@@ -38,7 +43,7 @@ export const router = createRouter({
       path: '/lazy',
       component: async () => {
         await delay(500)
-        return component
+        return component()
       },
     },
     {
@@ -152,6 +157,7 @@ router.beforeEach(async (to, from, next) => {
   const time = Number(to.query.delay)
   if (time > 0) {
     console.log('⏳ waiting ' + time + 'ms')
+    to.meta.waitedFor = time
     await delay(time)
   }
   next()
diff --git a/playground/views/Home.vue b/playground/views/Home.vue
index e32da0a4..79d9dc62 100644
--- a/playground/views/Home.vue
+++ b/playground/views/Home.vue
@@ -2,6 +2,7 @@
   <div>
     <div>Home</div>
     <p>My Data is: {{ someData }}</p>
+    <p v-if="waited != null">I waited for {{ waited }}</p>
     toggle: {{ log(toggle) }}
     <button @click="counter++">{{ counter }}</button>
   </div>
@@ -13,6 +14,7 @@ import { defineComponent, getCurrentInstance, inject, ref } from 'vue'
 
 export default defineComponent({
   name: 'Home',
+  props: ['waited'],
   data: () => ({
     toggle: false,
     counter: 0,