|
7 | 7 |
|
8 | 8 | The `history` option when creating the router instance allows us to choose among different history modes. |
9 | 9 |
|
10 | | -## Hash Mode |
| 10 | +## HTML5 Mode |
11 | 11 |
|
12 | | -The hash history mode is created with `createWebHashHistory()`: |
| 12 | +The HTML5 mode is created with `createWebHistory()` and is the recommended mode: |
13 | 13 |
|
14 | 14 | ```js |
15 | | -import { createRouter, createWebHashHistory } from 'vue-router' |
| 15 | +import { createRouter, createWebHistory } from 'vue-router' |
16 | 16 |
|
17 | 17 | const router = createRouter({ |
18 | | - history: createWebHashHistory(), |
| 18 | + history: createWebHistory(), |
19 | 19 | routes: [ |
20 | 20 | //... |
21 | 21 | ], |
22 | 22 | }) |
23 | 23 | ``` |
24 | 24 |
|
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! |
26 | 26 |
|
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. |
28 | 28 |
|
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()`: |
30 | 34 |
|
31 | 35 | ```js |
32 | | -import { createRouter, createWebHistory } from 'vue-router' |
| 36 | +import { createRouter, createWebHashHistory } from 'vue-router' |
33 | 37 |
|
34 | 38 | const router = createRouter({ |
35 | | - history: createWebHistory(), |
| 39 | + history: createWebHashHistory(), |
36 | 40 | routes: [ |
37 | 41 | //... |
38 | 42 | ], |
39 | 43 | }) |
40 | 44 | ``` |
41 | 45 |
|
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. |
47 | 47 |
|
48 | 48 | ## Memory mode |
49 | 49 |
|
|
0 commit comments