--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>Vue Router Examples - Encoding</title>
+ <!-- TODO: replace with local imports for promises and anything else needed -->
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
+
+ <style>
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: opacity 0.5s ease;
+ }
+ .fade-enter-from,
+ .fade-leave-active {
+ opacity: 0;
+ }
+ .child-view {
+ position: absolute;
+ transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+ }
+ .slide-left-enter-from,
+ .slide-right-leave-active {
+ opacity: 0;
+ -webkit-transform: translate(30px, 0);
+ transform: translate(30px, 0);
+ }
+ .slide-left-leave-active,
+ .slide-right-enter-from {
+ opacity: 0;
+ -webkit-transform: translate(-30px, 0);
+ transform: translate(-30px, 0);
+ }
+ </style>
+ </head>
+ <body>
+ <a href="/"><< Back to Homepage</a>
+ <hr />
+
+ <div id="app">
+ <h1>Transitions</h1>
+ <ul>
+ <li><router-link to="/">/</router-link></li>
+ <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>
+ </ul>
+ <transition name="fade" mode="out-in">
+ <router-view class="view"></router-view>
+ </transition>
+ </div>
+ </body>
+</html>
--- /dev/null
+import { createRouter, createWebHistory, useRoute } from '../../src'
+import { RouteComponent } from '../../src/types'
+import { createApp, nextTick } from 'vue'
+
+const Home: RouteComponent = {
+ template: `
+ <div class="home">
+ <h2>Home</h2>
+ <p>hello</p>
+ </div>
+ `,
+}
+
+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: `
+ <div class="parent">
+ <h2>Parent</h2>
+ {{ transitionName }}
+ <transition :name="transitionName">
+ <router-view class="child-view"></router-view>
+ </transition>
+ </div>
+ `,
+}
+
+const Default: RouteComponent = {
+ template: '<div class="default">default</div>',
+}
+const Foo: RouteComponent = { template: '<div class="foo">foo</div>' }
+const Bar: RouteComponent = { template: '<div class="bar">bar</div>' }
+
+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')
projects / thirdparty / vuejs / router.git / commitdiff
