|
| 1 | +import {createRouter, createWebHistory, RouterView} from 'vue-router' |
| 2 | +import Home from './views/Home.vue' |
| 3 | + |
| 4 | +import NotFound from './views/NotFound.vue' |
| 5 | + |
| 6 | + |
| 7 | +const component = () => { |
| 8 | + console.log('fetching component') |
| 9 | + return import('./views/Generic.vue') |
| 10 | +} |
| 11 | + |
| 12 | + |
| 13 | +import LongView from './views/HomeView.vue' |
| 14 | + |
| 15 | + |
| 16 | +import {globalState} from './store' |
| 17 | +import {scrollWaiter} from './scrollWaiter' |
| 18 | + |
| 19 | + |
| 20 | + |
| 21 | +let removeRoute: (() => void) | undefined |
| 22 | + |
| 23 | +export const routerHistory = createWebHistory() |
| 24 | +export const router = createRouter({ |
| 25 | + history: routerHistory, |
| 26 | + strict: true, |
| 27 | + routes: [ |
| 28 | + {path: '/home', redirect: '/'}, |
| 29 | + { |
| 30 | + path: '/', |
| 31 | + components: {default: Home, other: component}, |
| 32 | + props: {default: to => ({waited: to.meta.waitedFor})}, |
| 33 | + }, |
| 34 | + { |
| 35 | + path: '/always-redirect', |
| 36 | + redirect: () => ({ |
| 37 | + name: 'user', |
| 38 | + params: {id: String(Math.round(Math.random() * 100))}, |
| 39 | + }), |
| 40 | + }, |
| 41 | + |
| 42 | + |
| 43 | + {path: encodeURI('/n/€'), name: 'euro', component}, |
| 44 | + {path: '/n/:n', name: 'increment', component}, |
| 45 | + {path: '/multiple/:a/:b', name: 'multiple', component}, |
| 46 | + {path: '/long-:n', name: 'long', component: LongView}, |
| 47 | + { |
| 48 | + path: '/lazy', |
| 49 | + meta: {transition: 'slide-left'}, |
| 50 | + component: async () => { |
| 51 | + await delay(500) |
| 52 | + return component |
| 53 | + }, |
| 54 | + }, |
| 55 | + { |
| 56 | + path: '/with-guard/:n', |
| 57 | + name: 'guarded', |
| 58 | + component, |
| 59 | + beforeEnter(to) { |
| 60 | + if (to.params.n !== 'valid') return false |
| 61 | + }, |
| 62 | + }, |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | + {path: '/:data(.*)', component: NotFound, name: 'NotFound'}, |
| 68 | + |
| 69 | + |
| 70 | + { |
| 71 | + path: '/admin', |
| 72 | + children: [ |
| 73 | + {path: '', component}, |
| 74 | + {path: 'dashboard', component}, |
| 75 | + {path: 'settings', component}, |
| 76 | + ], |
| 77 | + }, |
| 78 | + ], |
| 79 | + async scrollBehavior(to, from, savedPosition) { |
| 80 | + await scrollWaiter.wait() |
| 81 | + if (savedPosition) { |
| 82 | + return savedPosition |
| 83 | + } else { |
| 84 | + if (to.matched.every((record, i) => from.matched[i] !== record)) |
| 85 | + return {left: 0, top: 0} |
| 86 | + } |
| 87 | + // leave scroll as it is by not returning anything |
| 88 | + // https://github.com/Microsoft/TypeScript/issues/18319 |
| 89 | + return false |
| 90 | + }, |
| 91 | +}) |
| 92 | + |
| 93 | +// router.push({ name: 'user', params: {} }) |
| 94 | + |
| 95 | +const delay = (t: number) => new Promise(resolve => setTimeout(resolve, t)) |
| 96 | + |
| 97 | +// remove trailing slashes |
| 98 | +router.beforeEach(to => { |
| 99 | + if (/.\/$/.test(to.path)) { |
| 100 | + to.meta.redirectCode = 301 |
| 101 | + return to.path.replace(/\/$/, '') |
| 102 | + } |
| 103 | +}) |
| 104 | + |
| 105 | +router.beforeEach(async to => { |
| 106 | + // console.log(`Guard from ${from.fullPath} to ${to.fullPath}`) |
| 107 | + if (to.params.id === 'no-name') return false |
| 108 | + |
| 109 | + const time = Number(to.query.delay) |
| 110 | + if (time > 0) { |
| 111 | + console.log('⏳ waiting ' + time + 'ms') |
| 112 | + to.meta.waitedFor = time |
| 113 | + await delay(time) |
| 114 | + } |
| 115 | +}) |
| 116 | + |
| 117 | +router.beforeEach(() => { |
| 118 | + if (globalState.cancelNextNavigation) return false |
| 119 | +}) |
| 120 | + |
| 121 | +router.afterEach((to, from) => { |
| 122 | + if (to.name === from.name && to.name === 'repeat') { |
| 123 | + const toDepth = to.path.split('/').length |
| 124 | + const fromDepth = from.path.split('/').length |
| 125 | + to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left' |
| 126 | + } |
| 127 | +}) |
| 128 | + |
| 129 | +router.afterEach((to, from) => { |
| 130 | + // console.log( |
| 131 | + // `After guard: from ${from.fullPath} to ${ |
| 132 | + // to.fullPath |
| 133 | + // } | location = ${location.href.replace(location.origin, '')}` |
| 134 | + // ) |
| 135 | +}) |
| 136 | + |
| 137 | +export function go(delta: number) { |
| 138 | + return new Promise((resolve, reject) => { |
| 139 | + function popStateListener() { |
| 140 | + clearTimeout(timeout) |
| 141 | + } |
| 142 | + |
| 143 | + window.addEventListener('popstate', popStateListener) |
| 144 | + |
| 145 | + function clearHooks() { |
| 146 | + removeAfterEach() |
| 147 | + removeOnError() |
| 148 | + window.removeEventListener('popstate', popStateListener) |
| 149 | + } |
| 150 | + |
| 151 | + // if the popstate event is not called, consider this a failure |
| 152 | + const timeout = setTimeout(() => { |
| 153 | + clearHooks() |
| 154 | + reject(new Error('Failed to use router.go()')) |
| 155 | + // using 0 leads to false positives |
| 156 | + }, 1) |
| 157 | + |
| 158 | + const removeAfterEach = router.afterEach((_to, _from, failure) => { |
| 159 | + clearHooks() |
| 160 | + resolve(failure) |
| 161 | + }) |
| 162 | + const removeOnError = router.onError(err => { |
| 163 | + clearHooks() |
| 164 | + reject(err) |
| 165 | + }) |
| 166 | + |
| 167 | + router.go(delta) |
| 168 | + }) |
| 169 | +} |
| 170 | + |
| 171 | +// @ts-expect-error |
| 172 | +window._go = go |
| 173 | + |
| 174 | +router.beforeEach(to => { |
| 175 | + // console.log('second guard') |
| 176 | + if (typeof to.query.to === 'string' && to.query.to) return to.query.to |
| 177 | +}) |
| 178 | + |
| 179 | +const dirLog = { |
| 180 | + '': '？', |
| 181 | + back: '⏪', |
| 182 | + forward: '⏩', |
| 183 | +} |
| 184 | +routerHistory.listen((to, from, info) => { |
| 185 | + console.log(`${dirLog[info.direction]} as a ${info.type}`) |
| 186 | +}) |
0 commit comments