diff --git a/docs/reference/config.md b/docs/reference/config.md index 6c397658..b0af1804 100644 --- a/docs/reference/config.md +++ b/docs/reference/config.md @@ -272,6 +272,20 @@ export default defineConfig({ }) ``` +## `routerMode` + +`'history' | 'hash'` - Default: `'history'` + +Changes the router mode: +- `'history'`: HTML 5 history mode with cleaner URLs. +- `'hash'`: Use the hashtag hack in the URL to support more servers and static hosting services. + +```ts +export default defineConfig({ + routerMode: 'hash', +}) +``` + ## `vite` `ViteConfig | ((config: ViteConfig, env: ViteConfigEnv) => void | ViteConfig | Promise)` diff --git a/packages/histoire/src/client/app/router.ts b/packages/histoire/src/client/app/router.ts index 4f535155..0a76b541 100644 --- a/packages/histoire/src/client/app/router.ts +++ b/packages/histoire/src/client/app/router.ts @@ -1,9 +1,19 @@ -import { createRouter, createWebHistory } from 'vue-router' +import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' +import { histoireConfig } from './util/config' export const base = import.meta.env.BASE_URL as string +function createRouterHistory () { + switch (histoireConfig.routerMode) { + case 'hash': return createWebHashHistory(base) + case 'history': + default: + return createWebHistory(base) + } +} + export const router = createRouter({ - history: createWebHistory(base), + history: createRouterHistory(), routes: [ { path: '/', diff --git a/packages/histoire/src/node/config.ts b/packages/histoire/src/node/config.ts index 3d390a44..cf3b1df5 100644 --- a/packages/histoire/src/node/config.ts +++ b/packages/histoire/src/node/config.ts @@ -145,6 +145,12 @@ export interface HistoireConfig { * Customize the markdown-it renderer */ markdown?: (md: MarkdownIt) => MarkdownIt | Promise + /** + * Change the router mode. + * - history: use HTML history with cleaner URLs + * - hash: use hashtag hack in the URL to support more hosting services + */ + routerMode?: 'history' | 'hash' /** * Vite config override */ @@ -264,6 +270,7 @@ export function getDefaultConfig (): HistoireConfig { }, ], sandboxDarkClass: 'dark', + routerMode: 'history', } }