What is HTML5 History mode

vue-router default hash mode - uses the hash of the URL to simulate a complete URL, so when the URL changes, the page will not be reloaded.

If we don’t want an ugly hash, we can use the routing history mode, which makes full use of the history.pushState API to complete URL jumps without reloading the page.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

When you use history mode, the URL is just like a normal URL, such as http://yoursite.com/user/id, which looks good too!

However, to play well in this mode, you need background configuration support. Because our application is a single-page client application, if the background is not configured correctly, when the user directly accesses http://oursite.com/user/id in the browser, 404 will be returned, which is not good-looking.

So, you need to add a candidate resource on the server side that covers all situations: if the URL does not match any static resources, it should return the same index.html page, which is the page your app depends on. .

Backend configuration example

  RewriteEngine On
  RewriteBase /  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f  RewriteCond %{REQUEST_FILENAME} !-d  RewriteRule . /index.html [L]

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)

https://github.com/bripkens/connect-history -api-fallback
Warning
Give a warning, because after doing this, your server will no longer return a 404 error page, because the index.html file will be returned for all paths. To avoid this, you should cover all routing situations in your Vue application and then present a 404 page.

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

Or, if you are using Node.js as the backend, you can use server-side routing to match the URL, and return 404 when no route is matched, thereby implementing fallback.

The above is the detailed content of What is HTML5 History mode. For more information, please follow other related articles on the PHP Chinese website!