vue-router history mode doesn't work on refresh

Question

I added vue-router to my project and it works fine with basic settings. But I want to get rid of the hashtag (#) in the URL. So following the documentation I switch to history mode. I works great with this link (<router-link to="/page/4">Open page</router-link>) but if I try to access this page directly (refresh) the server returns 404 error screen.

I use nginx (docker's nginx:alpine image) and this is the default file:

server {
    root /var/www;
    index index.html index.htm;

    server_name localhost;

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

And this is the router:

new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/page/:id',
      component: page
    }
  ],
});

Why it returns 404 error?

Solution

It's nginx configuration issue Insert config below to your nginx server block/config

error_page 404 /index.html;