From: Eduardo San Martin Morote Date: Sun, 29 Mar 2020 16:16:00 +0000 (+0200) Subject: test(e2e): add wip transition example X-Git-Tag: v4.0.0-alpha.5~54 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f10300b8cfeaa8907215b5ece53e80cc029f4422;p=thirdparty%2Fvuejs%2Frouter.git test(e2e): add wip transition example --- diff --git a/e2e/transitions/index.html b/e2e/transitions/index.html new file mode 100644 index 00000000..769defc9 --- /dev/null +++ b/e2e/transitions/index.html @@ -0,0 +1,55 @@ + + + + + + + Vue Router Examples - Encoding + + + + + + + << Back to Homepage +
+ +
+

Transitions

+ + + + +
+ + diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts new file mode 100644 index 00000000..2c7288a1 --- /dev/null +++ b/e2e/transitions/index.ts @@ -0,0 +1,72 @@ +import { createRouter, createWebHistory, useRoute } from '../../src' +import { RouteComponent } from '../../src/types' +import { createApp, nextTick } from 'vue' + +const Home: RouteComponent = { + template: ` +
+

Home

+

hello

+
+ `, +} + +const Parent: RouteComponent = { + data() { + return { + transitionName: 'slide-right', + } + }, + async beforeRouteUpdate(to, from, next) { + const toDepth = to.path.split('/').length + const fromDepth = from.path.split('/').length + + // @ts-ignore: move to composition api, cannot type `this` yet + this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' + await nextTick() + next() + }, + template: ` +
+

Parent

+ {{ transitionName }} + + + +
+ `, +} + +const Default: RouteComponent = { + template: '
default
', +} +const Foo: RouteComponent = { template: '
foo
' } +const Bar: RouteComponent = { template: '
bar
' } + +const webHistory = createWebHistory('/' + __dirname) +const router = createRouter({ + history: webHistory, + routes: [ + { path: '/', component: Home }, + { + path: '/parent', + component: Parent, + children: [ + { path: '', component: Default }, + { path: 'foo', component: Foo }, + { path: 'bar', component: Bar }, + ], + }, + ], +}) +const app = createApp({ + setup() { + return { + show: true, + route: useRoute(), + } + }, +}) +app.use(router) + +window.vm = app.mount('#app')