<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'
setup() {
const route = useRoute()
const state = inject('state')
+ const viewName = ref('default')
const currentLocation = computed(() => {
const { matched, ...rest } = route
state,
flushWaiter,
setupWaiter,
+ viewName,
+ toggleViewName() {
+ viewName.value = viewName.value === 'default' ? 'other' : 'default'
+ },
}
},
})
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'
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: () => ({
path: '/lazy',
component: async () => {
await delay(500)
- return component
+ return component()
},
},
{
const time = Number(to.query.delay)
if (time > 0) {
console.log('⏳ waiting ' + time + 'ms')
+ to.meta.waitedFor = time
await delay(time)
}
next()
<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>
export default defineComponent({
name: 'Home',
+ props: ['waited'],
data: () => ({
toggle: false,
counter: 0,