Skip to content

Commit 6b2f35e

Browse files
phananyyx990803
authored andcommitted
Reword and grammar-fix the HTML5 History Mode page (#677)
1 parent 34c57e1 commit 6b2f35e

File tree

1 file changed

+10
-8
lines changed

1 file changed

+10
-8
lines changed

docs/en/essentials/history-mode.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# HTML5 History Mode
22

3-
The default mode for `vue-router` is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
3+
The default mode for `vue-router` is _hash mode_ - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
44

5-
To get rid of the ugly hash, we can use the router's **history mode**, which leverages the `history.pushState` API to achieve URL navigation without page reload:
5+
To get rid of the hash, we can use the router's **history mode**, which leverages the `history.pushState` API to achieve URL navigation without a page reload:
66

77
``` js
88
const router = new VueRouter({
@@ -11,9 +11,11 @@ const router = new VueRouter({
1111
})
1212
```
1313

14-
But for this mode to work properly, you need to configure your server properly. When using history mode, the URL will look like a normal url, e.g. `http://yoursite.com/user/id`. Since our app is a single page client side app, without proper server configuration the users will get a 404 if they visit that URL directly.
14+
When using history mode, the URL will look "normal," e.g. `http://oursite.com/user/id`. Beautiful!
1515

16-
Therefore you need to add a 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.
16+
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 `http://oursite.com/user/id` directly in their browser. Now that's ugly.
17+
18+
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!
1719

1820
## Example Server Configurations
1921

@@ -40,11 +42,11 @@ location / {
4042

4143
#### Node.js (Express)
4244

43-
https://github.com/bripkens/connect-history-api-fallback
45+
For Node.js/Express, consider using [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback).
4446

45-
## Caveats
47+
## Caveat
4648

47-
There is a caveats to this, because that your server will no longer report 404 errors as all paths will serve up your `index.html` file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page:
49+
There is a caveat to this: Your server will no longer report 404 errors as all not-found paths now serve up your `index.html` file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page:
4850

4951
``` js
5052
const router = new VueRouter({
@@ -55,4 +57,4 @@ const router = new VueRouter({
5557
})
5658
```
5759

58-
Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL, and respond with 404 if no route is matched.
60+
Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL and respond with 404 if no route is matched.

0 commit comments

Comments
 (0)