},
template: `
- <div id="app">
- <section class="info">
- Name:
- <pre id="name">{{ $route.name }}</pre>
- </section>
-
- <section class="info">
- Params:
- <pre id="params">{{ $route.params }}</pre>
- </section>
-
- <section class="info">
- Query:
- <pre id="query">{{ $route.query }}</pre>
- </section>
-
- <section class="info">
- Hash:
- <pre id="hash">{{ $route.hash }}</pre>
- </section>
-
- <section class="info">
- FullPath:
- <pre id="fullPath">{{ $route.fullPath }}</pre>
- </section>
-
- <section class="info">
- path:
- <pre id="path">{{ $route.path }}</pre>
- </section>
-
- <hr />
-
- <ul>
- <li><router-link to="/">/</router-link></li>
- <li>
- <router-link to="/documents/%E2%82%AC"
- >/documents/%E2%82%AC</router-link
- >
- </li>
- <li>
- <router-link :to="{ name: 'docs', params: { id: '€uro' }}"
- >/documents/€uro (object)</router-link
- >
- </li>
- <li>
- <router-link
- :to="{ name: 'home', query: { currency: '€uro', 'é': 'e' }}"
- >/?currency=€uro&é=e (object)</router-link
- >
- </li>
- <li>
- <a href="/encoding/documents/%E2%82%AC"
- >/documents/%E2%82%AC (force reload)</a
- >
- </li>
- <li>
- <a href="/encoding/documents/€"
- >/documents/€ (force reload. not valid but should not crash the
- router)</a
- >
- </li>
- <li>
- <a :href="url"
- >Unencoded URL (force reload)</a
- >
- </li>
- <li>
- <router-link :to="urlObject"
- >Encoded by router</router-link>
- </li>
- </ul>
-
- <router-view></router-view>
- </div>
+ <section class="info">
+ Name:
+ <pre id="name">{{ $route.name }}</pre>
+ </section>
+
+ <section class="info">
+ Params:
+ <pre id="params">{{ $route.params }}</pre>
+ </section>
+
+ <section class="info">
+ Query:
+ <pre id="query">{{ $route.query }}</pre>
+ </section>
+
+ <section class="info">
+ Hash:
+ <pre id="hash">{{ $route.hash }}</pre>
+ </section>
+
+ <section class="info">
+ FullPath:
+ <pre id="fullPath">{{ $route.fullPath }}</pre>
+ </section>
+
+ <section class="info">
+ path:
+ <pre id="path">{{ $route.path }}</pre>
+ </section>
+
+ <hr />
+
+ <ul>
+ <li><router-link to="/">/</router-link></li>
+ <li>
+ <router-link to="/documents/%E2%82%AC"
+ >/documents/%E2%82%AC</router-link
+ >
+ </li>
+ <li>
+ <router-link :to="{ name: 'docs', params: { id: '€uro' }}"
+ >/documents/€uro (object)</router-link
+ >
+ </li>
+ <li>
+ <router-link
+ :to="{ name: 'home', query: { currency: '€uro', 'é': 'e' }}"
+ >/?currency=€uro&é=e (object)</router-link
+ >
+ </li>
+ <li>
+ <a href="/encoding/documents/%E2%82%AC"
+ >/documents/%E2%82%AC (force reload)</a
+ >
+ </li>
+ <li>
+ <a href="/encoding/documents/€"
+ >/documents/€ (force reload. not valid but should not crash the
+ router)</a
+ >
+ </li>
+ <li>
+ <a :href="url"
+ >Unencoded URL (force reload)</a
+ >
+ </li>
+ <li>
+ <router-link :to="urlObject"
+ >Encoded by router</router-link>
+ </li>
+ </ul>
+
+ <router-view></router-view>
`,
})
app.use(router)
const app = createApp({
template: `
- <div id="app">
- <h1>Instances</h1>
- <p>Using {{ testCase || 'default' }}</p>
- <button id="test-normal" @click="testCase = ''">Use Normal</button>
- <button id="test-keepalive" @click="testCase = 'keepalive'">Use Keep Alive</button>
- <button id="test-transition" @click="testCase = 'transition'">Use Transition</button>
- <button id="test-keyed" @click="testCase = 'keyed'">Use keyed</button>
- <button id="test-keepalivekeyed" @click="testCase = 'keepalivekeyed'">Use Keep Alive Keyed</button>
- <pre>
+ <h1>Instances</h1>
+ <p>Using {{ testCase || 'default' }}</p>
+ <button id="test-normal" @click="testCase = ''">Use Normal</button>
+ <button id="test-keepalive" @click="testCase = 'keepalive'">Use Keep Alive</button>
+ <button id="test-transition" @click="testCase = 'transition'">Use Transition</button>
+ <button id="test-keyed" @click="testCase = 'keyed'">Use keyed</button>
+ <button id="test-keepalivekeyed" @click="testCase = 'keepalivekeyed'">Use Keep Alive Keyed</button>
+ <pre>
route: {{ $route.fullPath }}
enters: {{ state.enter }}
updates: {{ state.update }}
leaves: {{ state.leave }}
- </pre>
- <pre id="logs">{{ logs.join('\\n') }}</pre>
- <button id="resetLogs" @click="logs = []">Reset Logs</button>
- <ul>
- <li><router-link to="/">/</router-link></li>
- <li><router-link to="/foo">/foo</router-link></li>
- <li><router-link to="/f/1">/f/1</router-link></li>
- <li><router-link to="/f/2">/f/2</router-link></li>
- <li><router-link to="/f/2?bar=foo">/f/2?bar=foo</router-link></li>
- <li><router-link to="/f/2?foo=key">/f/2?foo=key</router-link></li>
- <li><router-link to="/f/2?foo=key2">/f/2?foo=key2</router-link></li>
- <li><router-link id="update-query" :to="{ query: { n: (Number($route.query.n) || 0) + 1 }}" v-slot="{ route }">{{ route.fullPath }}</router-link></li>
- <li><router-link to="/named-one">/named-one</router-link></li>
- <li><router-link to="/named-two">/named-two</router-link></li>
- </ul>
-
- <template v-if="testCase === 'keepalive'">
- <router-view v-slot="{ Component }" >
- <keep-alive>
- <component :is="Component" class="view" />
- </keep-alive>
- </router-view>
- </template>
- <template v-else-if="testCase === 'transition'">
- <router-view v-slot="{ Component }" >
- <transition name="fade" mode="">
- <component :is="Component" class="view" />
- </transition>
- </router-view>
- </template>
- <template v-else-if="testCase === 'keyed'">
- <router-view :key="$route.query.foo || undefined" class="view" />
- </template>
- <template v-else-if="testCase === 'keepalivekeyed'">
- <router-view v-slot="{ Component }" >
- <keep-alive>
- <component :is="Component" :key="$route.query.foo || undefined" class="view" />
- </keep-alive>
- </router-view>
- </template>
- <template v-else>
- <router-view class="view" />
- <router-view class="aux-view" name="aux" />
- </template>
-
- </div>
+ </pre>
+ <pre id="logs">{{ logs.join('\\n') }}</pre>
+ <button id="resetLogs" @click="logs = []">Reset Logs</button>
+ <ul>
+ <li><router-link to="/">/</router-link></li>
+ <li><router-link to="/foo">/foo</router-link></li>
+ <li><router-link to="/f/1">/f/1</router-link></li>
+ <li><router-link to="/f/2">/f/2</router-link></li>
+ <li><router-link to="/f/2?bar=foo">/f/2?bar=foo</router-link></li>
+ <li><router-link to="/f/2?foo=key">/f/2?foo=key</router-link></li>
+ <li><router-link to="/f/2?foo=key2">/f/2?foo=key2</router-link></li>
+ <li><router-link id="update-query" :to="{ query: { n: (Number($route.query.n) || 0) + 1 }}" v-slot="{ route }">{{ route.fullPath }}</router-link></li>
+ <li><router-link to="/named-one">/named-one</router-link></li>
+ <li><router-link to="/named-two">/named-two</router-link></li>
+ </ul>
+
+ <template v-if="testCase === 'keepalive'">
+ <router-view v-slot="{ Component }" >
+ <keep-alive>
+ <component :is="Component" class="view" />
+ </keep-alive>
+ </router-view>
+ </template>
+ <template v-else-if="testCase === 'transition'">
+ <router-view v-slot="{ Component }" >
+ <transition name="fade" mode="">
+ <component :is="Component" class="view" />
+ </transition>
+ </router-view>
+ </template>
+ <template v-else-if="testCase === 'keyed'">
+ <router-view :key="$route.query.foo || undefined" class="view" />
+ </template>
+ <template v-else-if="testCase === 'keepalivekeyed'">
+ <router-view v-slot="{ Component }" >
+ <keep-alive>
+ <component :is="Component" :key="$route.query.foo || undefined" class="view" />
+ </keep-alive>
+ </router-view>
+ </template>
+ <template v-else>
+ <router-view class="view" />
+ <router-view class="aux-view" name="aux" />
+ </template>
`,
setup() {
const router = useRouter()
},
template: `
- <div id="app">
- <ul>
- <li><router-link to="/">/</router-link></li>
- <li><router-link to="/foo">/foo</router-link></li>
- <li><router-link to="/bar">/bar</router-link></li>
- <li><router-link :to="{ name: 'encoded' }">/n/é</router-link></li>
- <li><router-link to="/unicode/é">/unicode/é (not properly encoded, fails on some browsers)</router-link></li>
- <li>
- <router-link :to="{ name: 'unicode', params: { id: 'é' }}"
- >/unicode/é (correctly encoded)</router-link
- >
- </li>
- <li>
- <router-link :to="{ path: '/', query: { t: 'é', 'é': 'e' }}"
- >/?currency=€uro&é=e (object)</router-link
- >
- </li>
- <li>
- <a href="/hash/#/unicode/%E2%82%AC"
- >/unicode/%E2%82%AC (force reload)</a
- >
- </li>
- <li>
- <a href="/hash/#/unicode/€"
- >/unicode/€ (force reload. not valid but should not crash the
- router)</a
- >
- </li>
- <li><a href="#/foo">/foo (regular hash)</a></li>
- </ul>
+ <ul>
+ <li><router-link to="/">/</router-link></li>
+ <li><router-link to="/foo">/foo</router-link></li>
+ <li><router-link to="/bar">/bar</router-link></li>
+ <li><router-link :to="{ name: 'encoded' }">/n/é</router-link></li>
+ <li><router-link to="/unicode/é">/unicode/é (not properly encoded, fails on some browsers)</router-link></li>
+ <li>
+ <router-link :to="{ name: 'unicode', params: { id: 'é' }}"
+ >/unicode/é (correctly encoded)</router-link
+ >
+ </li>
+ <li>
+ <router-link :to="{ path: '/', query: { t: 'é', 'é': 'e' }}"
+ >/?currency=€uro&é=e (object)</router-link
+ >
+ </li>
+ <li>
+ <a href="/hash/#/unicode/%E2%82%AC"
+ >/unicode/%E2%82%AC (force reload)</a
+ >
+ </li>
+ <li>
+ <a href="/hash/#/unicode/€"
+ >/unicode/€ (force reload. not valid but should not crash the
+ router)</a
+ >
+ </li>
+ <li><a href="#/foo">/foo (regular hash)</a></li>
+ </ul>
- <p>
- path: <code id="path">{{ route.path }}</code>
- <br />
- query.t: <code id="query-t">{{ route.query.t }}</code>
- <br />
- hash: <code id="hash">{{ route.hash }}</code>
- </p>
+ <p>
+ path: <code id="path">{{ route.path }}</code>
+ <br />
+ query.t: <code id="query-t">{{ route.query.t }}</code>
+ <br />
+ hash: <code id="hash">{{ route.hash }}</code>
+ </p>
- <router-view class="view"></router-view>
- </div>
+ <router-view class="view"></router-view>
`,
})
app.use(router)
})
const app = createApp({
template: `
- <div id="app">
- <h1>KeepAlive</h1>
- <ul>
- <li><router-link to="/">/</router-link></li>
- <li><router-link to="/foo">/foo</router-link></li>
- <li><router-link to="/with-guards">/with-guards</router-link></li>
- </ul>
- <router-view v-slot="{ Component }">
- <keep-alive>
- <component class="view" :is="Component" />
- </keep-alive>
- </router-view>
- </div>
+ <h1>KeepAlive</h1>
+ <ul>
+ <li><router-link to="/">/</router-link></li>
+ <li><router-link to="/foo">/foo</router-link></li>
+ <li><router-link to="/with-guards">/with-guards</router-link></li>
+ </ul>
+ <router-view v-slot="{ Component }">
+ <keep-alive>
+ <component class="view" :is="Component" />
+ </keep-alive>
+ </router-view>
`,
})
app.use(router)
},
template: `
- <div id="app">
- <router-view :route="routeWithModal"></router-view>
- </div>
+ <router-view :route="routeWithModal"></router-view>
`,
})
app.use(router)
},
template: `
- <div id="app">
- <h1>Scroll Behavior</h1>
- <ul>
- <li><router-link to="/">/</router-link></li>
- <li><router-link to="/foo">/foo</router-link></li>
- <li><router-link to="/bar">/bar</router-link></li>
- <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
- <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
- <li><router-link :to="hashWithNumber">/bar#1number</router-link></li>
- </ul>
- <label>
- <input type="checkbox" v-model="smoothScroll"> Use smooth scroll
- </label>
- <router-view class="view" v-slot="{ Component }">
- <transition
- name="fade"
- mode="out-in"
- @before-enter="flushWaiter"
- @before-leave="setupWaiter"
- >
- <component :is="Component" />
- </transition>
- </router-view>
- </div>
+ <h1>Scroll Behavior</h1>
+ <ul>
+ <li><router-link to="/">/</router-link></li>
+ <li><router-link to="/foo">/foo</router-link></li>
+ <li><router-link to="/bar">/bar</router-link></li>
+ <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
+ <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
+ <li><router-link :to="hashWithNumber">/bar#1number</router-link></li>
+ </ul>
+ <label>
+ <input type="checkbox" v-model="smoothScroll"> Use smooth scroll
+ </label>
+ <router-view class="view" v-slot="{ Component }">
+ <transition
+ name="fade"
+ mode="out-in"
+ @before-enter="flushWaiter"
+ @before-leave="setupWaiter"
+ >
+ <component :is="Component" />
+ </transition>
+ </router-view>
`,
})
app.use(router)
},
template: `
- <div id="app">
- <h1>Transitions</h1>
- <pre>CI: ${__CI__}</pre>
- <button id="toggle-transition" @click="toggleTransition">Toggle Transition</button>
- <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>
- <li><router-link to="/not-found">Not existing</router-link></li>
+ <h1>Transitions</h1>
+ <pre>CI: ${__CI__}</pre>
+ <button id="toggle-transition" @click="toggleTransition">Toggle Transition</button>
+ <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>
+ <li><router-link to="/not-found">Not existing</router-link></li>
<li><router-link to="/nested">/nested</router-link></li>
<li><router-link to="/nested/foo">/nested/foo</router-link></li>