mirror of https://github.com/vuejs/vitepress
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
4.3 KiB
187 lines
4.3 KiB
4 years ago
|
import { reactive, inject, nextTick, markRaw } from 'vue'
|
||
4 years ago
|
|
||
4 years ago
|
/**
|
||
4 years ago
|
* @typedef {import('vue').Component} Component
|
||
|
*
|
||
4 years ago
|
* @typedef {{
|
||
|
* path: string
|
||
4 years ago
|
* contentComponent: Component | null
|
||
4 years ago
|
* }} Route
|
||
4 years ago
|
*
|
||
|
* @typedef {{
|
||
|
* route: Route
|
||
|
* go: (href: string) => Promise<void>
|
||
|
* }} Router
|
||
4 years ago
|
*/
|
||
4 years ago
|
|
||
|
/**
|
||
4 years ago
|
* @type {import('vue').InjectionKey<Router>}
|
||
4 years ago
|
*/
|
||
4 years ago
|
export const RouterSymbol = Symbol()
|
||
4 years ago
|
|
||
|
/**
|
||
|
* @returns {Route}
|
||
|
*/
|
||
|
const getDefaultRoute = () => ({
|
||
4 years ago
|
path: '/',
|
||
4 years ago
|
contentComponent: null
|
||
4 years ago
|
})
|
||
4 years ago
|
|
||
4 years ago
|
/**
|
||
4 years ago
|
* @param {(route: Route) => Component | Promise<Component>} loadComponent
|
||
|
* @param {Component} [fallbackComponent]
|
||
4 years ago
|
* @returns {Router}
|
||
|
*/
|
||
4 years ago
|
export function createRouter(loadComponent, fallbackComponent) {
|
||
4 years ago
|
const route = reactive(getDefaultRoute())
|
||
4 years ago
|
const inBrowser = typeof window !== 'undefined'
|
||
4 years ago
|
|
||
4 years ago
|
/**
|
||
|
* @param {string} href
|
||
|
* @returns {Promise<void>}
|
||
|
*/
|
||
|
function go(href) {
|
||
|
if (inBrowser) {
|
||
|
// save scroll position before changing url
|
||
|
history.replaceState({ scrollPosition: window.scrollY }, document.title)
|
||
|
history.pushState(null, '', href)
|
||
|
}
|
||
|
return loadPage(href)
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @param {string} href
|
||
|
* @param {number} scrollPosition
|
||
|
* @returns {Promise<void>}
|
||
|
*/
|
||
4 years ago
|
async function loadPage(href, scrollPosition = 0) {
|
||
|
// we are just using URL to parse the pathname and hash - the base doesn't
|
||
|
// matter and is only passed to support same-host hrefs.
|
||
|
const targetLoc = new URL(href, `http://vuejs.org`)
|
||
4 years ago
|
const pendingPath = (route.path = targetLoc.pathname)
|
||
|
|
||
4 years ago
|
try {
|
||
|
let comp = loadComponent(route)
|
||
|
// only await if it returns a Promise - this allows sync resolution
|
||
|
// on initial render in SSR.
|
||
|
if ('then' in comp && typeof comp.then === 'function') {
|
||
|
comp = await comp
|
||
|
}
|
||
|
if (route.path === pendingPath) {
|
||
4 years ago
|
if (!comp) {
|
||
|
throw new Error(`Invalid route component: ${comp}`)
|
||
|
}
|
||
4 years ago
|
route.contentComponent = markRaw(comp)
|
||
|
if (inBrowser) {
|
||
4 years ago
|
await nextTick()
|
||
|
|
||
|
if (targetLoc.hash && !scrollPosition) {
|
||
|
/**
|
||
|
* @type {HTMLElement | null}
|
||
|
*/
|
||
|
const target = document.querySelector(targetLoc.hash)
|
||
|
if (target) {
|
||
|
scrollPosition = target.offsetTop
|
||
|
}
|
||
|
}
|
||
|
|
||
|
window.scrollTo({
|
||
|
left: 0,
|
||
|
top: scrollPosition,
|
||
|
behavior: 'auto'
|
||
|
})
|
||
|
}
|
||
4 years ago
|
}
|
||
|
} catch (err) {
|
||
|
if (!err.message.match(/fetch/)) {
|
||
4 years ago
|
console.error(err)
|
||
|
}
|
||
|
if (route.path === pendingPath) {
|
||
4 years ago
|
route.contentComponent = fallbackComponent
|
||
|
? markRaw(fallbackComponent)
|
||
|
: null
|
||
|
}
|
||
|
}
|
||
4 years ago
|
}
|
||
|
|
||
|
if (inBrowser) {
|
||
|
window.addEventListener(
|
||
|
'click',
|
||
|
/**
|
||
|
* @param {*} e
|
||
|
*/
|
||
|
(e) => {
|
||
|
if (e.target.tagName === 'A') {
|
||
|
const { href, target } = e.target
|
||
|
const targetUrl = new URL(href)
|
||
|
const currentUrl = window.location
|
||
|
if (
|
||
|
target !== `_blank` &&
|
||
|
targetUrl.protocol === currentUrl.protocol &&
|
||
|
targetUrl.hostname === currentUrl.hostname
|
||
|
) {
|
||
|
if (targetUrl.pathname === currentUrl.pathname) {
|
||
|
// smooth scroll bewteen hash anchors in the same page
|
||
|
if (targetUrl.hash !== currentUrl.hash) {
|
||
|
e.preventDefault()
|
||
|
window.scrollTo({
|
||
|
left: 0,
|
||
|
top: e.target.offsetTop,
|
||
|
behavior: 'smooth'
|
||
|
})
|
||
|
}
|
||
|
} else {
|
||
4 years ago
|
e.preventDefault()
|
||
4 years ago
|
go(href)
|
||
4 years ago
|
}
|
||
|
}
|
||
4 years ago
|
}
|
||
4 years ago
|
},
|
||
|
{ capture: true }
|
||
|
)
|
||
|
|
||
|
window.addEventListener(
|
||
|
'popstate',
|
||
|
/**
|
||
|
* @param {*} e
|
||
|
*/
|
||
|
(e) => {
|
||
4 years ago
|
loadPage(location.href, (e.state && e.state.scrollPosition) || 0)
|
||
4 years ago
|
}
|
||
4 years ago
|
)
|
||
|
}
|
||
4 years ago
|
|
||
4 years ago
|
/**
|
||
|
* @type {Router}
|
||
|
*/
|
||
|
const router = {
|
||
|
route,
|
||
|
go
|
||
|
}
|
||
4 years ago
|
|
||
4 years ago
|
if (inBrowser) {
|
||
|
loadPage(location.href)
|
||
|
}
|
||
4 years ago
|
|
||
|
return router
|
||
4 years ago
|
}
|
||
|
|
||
|
/**
|
||
4 years ago
|
* @return {Router}
|
||
4 years ago
|
*/
|
||
4 years ago
|
export function useRouter() {
|
||
|
const router = inject(RouterSymbol)
|
||
4 years ago
|
if (!router) {
|
||
|
throw new Error('useRouter() is called without provider.')
|
||
4 years ago
|
}
|
||
4 years ago
|
// @ts-ignore
|
||
|
return router
|
||
4 years ago
|
}
|
||
|
|
||
4 years ago
|
/**
|
||
|
* @returns {Route}
|
||
|
*/
|
||
|
export function useRoute() {
|
||
|
return useRouter().route
|
||
4 years ago
|
}
|