From: Eduardo San Martin Morote Date: Tue, 26 Jan 2021 16:54:56 +0000 (+0100) Subject: chore: more wip X-Git-Tag: v4.0.11~36 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=f3c2bdeb51434c158f2fc2f7ace900078b3335b1;p=thirdparty%2Fvuejs%2Frouter.git chore: more wip --- diff --git a/e2e/suspended-router-view/index.html b/e2e/suspended-router-view/index.html index fb3729b3..a772db3d 100644 --- a/e2e/suspended-router-view/index.html +++ b/e2e/suspended-router-view/index.html @@ -7,6 +7,17 @@ Vue Router e2e tests - Suspended RouterView + + << Back to Homepage diff --git a/e2e/suspended-router-view/index.ts b/e2e/suspended-router-view/index.ts index 1a9e8ea0..e0ed958c 100644 --- a/e2e/suspended-router-view/index.ts +++ b/e2e/suspended-router-view/index.ts @@ -1,5 +1,18 @@ -import { createRouter, createWebHistory, RouterViewSuspended } from '../../src' -import { createApp, defineComponent, onErrorCaptured } from 'vue' +import { createRouter, createWebHistory, useRoute } from '../../src' +import { computed, createApp, defineComponent, onErrorCaptured } from 'vue' + +// override existing style on dev with shorter times +if (!__CI__) { + const transitionDuration = '0.3s' + const styleEl = document.createElement('style') + styleEl.innerHTML = ` +.fade-enter-active, +.fade-leave-active { + transition: opacity ${transitionDuration} ease; +} +` + document.head.append(styleEl) +} const delay = (t: number) => new Promise(r => setTimeout(r, t)) @@ -14,13 +27,24 @@ const ViewRegular = defineComponent({ template: '
Regular
', }) +const ViewId = defineComponent({ + template: '
Id: {{ $route.params.id }}
', +}) + const ViewData = defineComponent({ template: `

With Data

{{ $route.path }}

- + + + + + + + +
`, @@ -44,6 +68,7 @@ const router = createRouter({ children: [ { path: '', component: ViewRegular }, { path: 'data', component: ViewData }, + { path: ':id', name: 'id1', component: ViewId }, ], }, { @@ -52,6 +77,7 @@ const router = createRouter({ children: [ { path: '', component: ViewRegular }, { path: 'data', component: ViewData }, + { path: ':id', name: 'id2', component: ViewId }, ], }, ], @@ -59,6 +85,7 @@ const router = createRouter({ const app = createApp({ setup() { + const route = useRoute() function onPending() { console.log('onPending') } @@ -73,7 +100,9 @@ const app = createApp({ console.log('caught', err, target, info) }) - return { onPending, onResolve, onFallback } + const nextId = computed(() => (Number(route.params.id) || 0) + 1) + + return { onPending, onResolve, onFallback, nextId } }, template: ` @@ -82,17 +111,26 @@ const app = createApp({
  • Home
  • Suspended
  • Suspended nested
    • +
  • /data/{{ nextId }}
    • +
  • Suspended (2)
  • Suspended nested (2)
    • +
  • /data/{{ nextId }}
    • - + + + + + + + `, }) app.use(router) -app.component('RouterView', RouterViewSuspended) +// app.component('RouterView', RouterViewSuspended) window.vm = app.mount('#app') window.r = router diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts index 79dd7436..d2faa3e5 100644 --- a/e2e/transitions/index.ts +++ b/e2e/transitions/index.ts @@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from '../../src' import { RouteComponent } from '../../src/types' import { createApp, defineComponent, nextTick, ref } from 'vue' +const delay = (t: number) => new Promise(r => setTimeout(r, t)) + const Home: RouteComponent = { template: `
    @@ -9,6 +11,9 @@ const Home: RouteComponent = {

    hello

    `, + async setup() { + await delay(1000) + }, } // override existing style on dev with shorter times @@ -54,6 +59,9 @@ const Parent: RouteComponent = {     `, + async setup() { + await delay(1000) + }, } const NestedTransition = defineComponent({ @@ -127,9 +135,11 @@ const app = createApp({
  • /nested/bar
    • + + `,