[Vuejs]-Vue routing breaks if URL doesn't contain a hash (no input file specified)

by

0👍

As the official documents say, 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.

When you using history mode, without a proper server configuration, the users will get a 404 error if they access http://myurl.com/highlights directly in their browser.

So, 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.

For more server configuration information, you can view this – example-server-configurations

0👍

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:

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

to avoid the error when using history mode.
You need a proper server configuration,

Example Server Configurations

Apache

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

nignx

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

For more info. visit docs
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Leave a comment