feat(nuxt): router with hash mode (#6980)

docs/content/2.guide/3.directory-structure/10.pages.md

@@ -372,11 +372,11 @@ If returning `null` or `undefined`, Nuxt will fallback to the default history.
 
 ```js [app/router.options.ts]
 import type { RouterOptions } from '@nuxt/schema'
-import { createWebHashHistory } from 'vue-router'
+import { createMemoryHistory } from 'vue-router'
 
 // https://router.vuejs.org/api/interfaces/routeroptions.html
 export default <RouterOptions> {
-  history: (base) => process.client ? createWebHashHistory(base) : null /* use default */
+  history: base => process.client ? createMemoryHistory(base) : null /* default */
 }
 ```
 
@@ -389,6 +389,7 @@ export default <RouterOptions> {
 - `end`
 - `sensitive`
 - `strict`
+- `hashMode`
 
 ```js [nuxt.config]
 export default defineNuxtConfig({
@@ -399,6 +400,25 @@ export default defineNuxtConfig({
 })
 ```
 
+### Hash Mode (SPA)
+
+:StabilityEdge{title="hash mode"}
+
+You can enable hash history in SPA mode. In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
+
+```ts [nuxt.config.ts]
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  ssr: false,
+  router: {
+    options: {
+      hashMode: true
+    }
+  }
+})
+```
+
 ## Programmatic Navigation
 
 Nuxt 3 allows programmatic navigation through the `navigateTo()` utility method. Using this utility method, you will be able to programmatically navigate the user in your app. This is great for taking input from the user and navigating them dynamically throughout your application. In this example, we have a simple method called `navigate()` that gets called when the user submits a search form.

packages/nuxt/src/pages/runtime/router.ts

@@ -3,6 +3,7 @@ import {
   createRouter,
   createWebHistory,
   createMemoryHistory,
+  createWebHashHistory,
   NavigationGuard,
   RouteLocation
 } from 'vue-router'
@@ -27,7 +28,7 @@ declare module 'vue' {
   }
 }
 
-// https://github.dev/vuejs/router/blob/main/src/history/html5.ts#L33-L56
+// https://github.com/vuejs/router/blob/4a0cc8b9c1e642cdf47cc007fa5bbebde70afc66/packages/router/src/history/html5.ts#L37
 function createCurrentLocation (
   base: string,
   location: Location
@@ -54,14 +55,20 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   nuxtApp.vueApp.component('NuxtNestedPage', NuxtPage)
   nuxtApp.vueApp.component('NuxtChild', NuxtPage)
 
-  const baseURL = useRuntimeConfig().app.baseURL
+  let routerBase = useRuntimeConfig().app.baseURL
+  if (routerOptions.hashMode && !routerBase.includes('#')) {
+    // allow the user to provide a `#` in the middle: `/base/#/app`
+    routerBase += '#'
+  }
 
-  const history = routerOptions.history?.(baseURL) ??
+  const history = routerOptions.history?.(routerBase) ?? (process.client
-    (process.client ? createWebHistory(baseURL) : createMemoryHistory(baseURL))
+    ? (routerOptions.hashMode ? createWebHashHistory(routerBase) : createWebHistory(routerBase))
+    : createMemoryHistory(routerBase)
+  )
 
   const routes = routerOptions.routes?.(_routes) ?? _routes
 
-  const initialURL = process.server ? nuxtApp.ssrContext!.url : createCurrentLocation(baseURL, window.location)
+  const initialURL = process.server ? nuxtApp.ssrContext!.url : createCurrentLocation(routerBase, window.location)
   const router = createRouter({
     ...routerOptions,
     history,

packages/schema/src/types/router.ts

@@ -4,6 +4,7 @@ import type { RouterOptions as _RouterOptions, RouterHistory } from 'vue-router'
 export type RouterOptions = Partial<Omit<_RouterOptions, 'history' | 'routes'>> & {
   history?: (baseURL?: string) => RouterHistory
   routes?: (_routes: _RouterOptions['routes']) => _RouterOptions['routes']
+  hashMode?: boolean
 }
 
 export type RouterConfig = RouterOptions
@@ -11,7 +12,7 @@ export type RouterConfig = RouterOptions
 /**
  * Only JSON serializable router options are configurable from nuxt config
  */
-export type RouterConfigSerializable = Pick<RouterConfig, 'linkActiveClass' | 'linkExactActiveClass' | 'end' | 'sensitive' | 'strict'>
+export type RouterConfigSerializable = Pick<RouterConfig, 'linkActiveClass' | 'linkExactActiveClass' | 'end' | 'sensitive' | 'strict' | 'hashMode'>
 
 
 /** @deprecated Use RouterConfigSerializable instead */