Skip to content

Commit baf881f

Browse files
authored
docs: reorder history modes (#2454)
1 parent 7deea23 commit baf881f

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

packages/docs/guide/essentials/history-mode.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,43 +7,43 @@
77

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

10-
## Hash Mode
10+
## HTML5 Mode
1111

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

1414
```js
15-
import { createRouter, createWebHashHistory } from 'vue-router'
15+
import { createRouter, createWebHistory } from 'vue-router'
1616

1717
const router = createRouter({
18-
history: createWebHashHistory(),
18+
history: createWebHistory(),
1919
routes: [
2020
//...
2121
],
2222
})
2323
```
2424

25-
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.
25+
When using `createWebHistory()`, the URL will look "normal," e.g. `https://example.com/user/id`. Beautiful!
2626

27-
## HTML5 Mode
27+
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.
2828

29-
The HTML5 mode is created with `createWebHistory()` and is the recommended mode:
29+
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!
30+
31+
## Hash Mode
32+
33+
The hash history mode is created with `createWebHashHistory()`:
3034

3135
```js
32-
import { createRouter, createWebHistory } from 'vue-router'
36+
import { createRouter, createWebHashHistory } from 'vue-router'
3337

3438
const router = createRouter({
35-
history: createWebHistory(),
39+
history: createWebHashHistory(),
3640
routes: [
3741
//...
3842
],
3943
})
4044
```
4145

42-
When using `createWebHistory()`, the URL will look "normal," e.g. `https://example.com/user/id`. Beautiful!
43-
44-
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.
45-
46-
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!
46+
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.
4747

4848
## Memory mode
4949

0 commit comments

Comments
 (0)