docs: reorder history modes (#2454)

diff --git a/packages/docs/guide/essentials/history-mode.md b/packages/docs/guide/essentials/history-mode.md
index 8cb720e93b6791e56cb4d4260e4192d2d6f269fb..5a50bb9f0900912429167e0d50a9d5221626ae03 100644 (file)
--- a/packages/docs/guide/essentials/history-mode.md
+++ b/packages/docs/guide/essentials/history-mode.md
@@ -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