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

This commit is contained in:
pooya parsa 2022-09-04 10:11:28 +02:00 committed by GitHub
parent 720506d263
commit ac56ce7dd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 8 deletions

View File

@ -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.

View File

@ -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,

View File

@ -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 */