The local refresh is normal, but a 404 error occurs when accessing the front-end routing interface

Vue-router’s default hash mode – The hash of a URL is used to simulate a complete URL, and when the URL changes (the browser thinks it hasn’t), the page doesn’t reload. But this hash is ugly and doesn’t fit with URL usage. Therefore, we need to use another mode called history to jump to the URL without reloading the page. This mode takes full advantage of the history.pushState API to jump to the URL without reloading the page.

Treatment method 1 :(failed the test)

Get rid of the history mode and still use hash mode, i.e. comment out this line of code

Treatment method two:

To use this mode, you also need background configuration support. Because our application is a single page of the client application, if there is no correct configuration, the background when the user directly in the browser to http://114.115.162.177/myReport, will return 404, appear more accidents.

If the URL does not match any static resources, you should return the same index.html page that your project will depend on.

Back-end configuration examples

Apache(untested)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
Copy the code

Nginx (test failed)

location / {
  try_files $uri $uri/ /index.html;
}
Copy the code

Node.js (Express test successful)

https://github.com/bripkens/connect-history-api-fallback
Copy the code

Be warned, because by doing so, 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 overwrite all routing cases in the Vue application and then render a 404 page.

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

If you are using Node.js as a backend, you can use server-side routing to match urls and return 404 if no route is matched, thus implementing fallback.