mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
feat(nuxt): router with hash mode (#6980)
This commit is contained in:
parent
720506d263
commit
ac56ce7dd1
@ -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.
|
||||
|
@ -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) ??
|
||||
(process.client ? createWebHistory(baseURL) : createMemoryHistory(baseURL))
|
||||
const history = routerOptions.history?.(routerBase) ?? (process.client
|
||||
? (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,
|
||||
|
@ -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 */
|
||||
|
Loading…
Reference in New Issue
Block a user