Skip to content

Commit

Permalink
docs: reorder history modes (#2454)
Browse files Browse the repository at this point in the history
  • Loading branch information
bertday authored Feb 1, 2025
1 parent 7deea23 commit baf881f
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions packages/docs/guide/essentials/history-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,43 @@

The `history` option when creating the router instance allows us to choose among different history modes.

## Hash Mode
## HTML5 Mode

The hash history mode is created with `createWebHashHistory()`:
The HTML5 mode is created with `createWebHistory()` and is the recommended mode:

```js
import { createRouter, createWebHashHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
history: createWebHashHistory(),
history: createWebHistory(),
routes: [
//...
],
})
```

It uses a hash character (`#`) before the actual URL that is internally passed. Because this section of the URL is never sent to the server, it doesn't require any special treatment on the server level. **It does however have a bad impact in SEO**. If that's a concern for you, use the HTML5 history mode.
When using `createWebHistory()`, the URL will look "normal," e.g. `https://example.com/user/id`. Beautiful!

## HTML5 Mode
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access `https://example.com/user/id` directly in their browser. Now that's ugly.

The HTML5 mode is created with `createWebHistory()` and is the recommended mode:
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same `index.html` page that your app lives in. Beautiful, again!

## Hash Mode

The hash history mode is created with `createWebHashHistory()`:

```js
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
history: createWebHistory(),
history: createWebHashHistory(),
routes: [
//...
],
})
```

When using `createWebHistory()`, the URL will look "normal," e.g. `https://example.com/user/id`. Beautiful!

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access `https://example.com/user/id` directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same `index.html` page that your app lives in. Beautiful, again!
It uses a hash character (`#`) before the actual URL that is internally passed. Because this section of the URL is never sent to the server, it doesn't require any special treatment on the server level. **It does however have a bad impact in SEO**. If that's a concern for you, use the HTML5 history mode.

## Memory mode

Expand Down

0 comments on commit baf881f

Please # to comment.