Vue Router returns 404 when navigating to URL

Question

I just turned on the Vue router history mode. And it works great when I visit vue routing through v-href or href. But when I try to refresh this page or go directly from the address bar of the browser, it just returns 404. Is there any way to accept an update / revision of this URL?

The following is the configuration of the Vue router.

var router = new VueRouter({ hashbang: false, history: true, mode: 'html5', linkActiveClass: "active", root: '/user' }); 

Answer 1

When you refresh the page, you make a request to the server with the current URL, and the server returns 404. You must handle this at your web level or web server level.

https://router.vuejs.org/en/essentials/history-mode.html

Answer 2

I think you are missing the fact that SPA is not server-side rendering. At least for most. That way, when you access / anything, your web server does not redirect it to index.html. However, if you click on any vuejs router link, it will work because javascript received the action, but not on the server side.

To solve this problem, use .htaccess and redirect all requests to index.html like this

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

Hope this helps someone!

Answer 3

If you really don't care about the hash in the URL, you can simply set the hash for the mode in the router configuration file: mode: 'hash' This works great without the need for server-side configuration.

 const router = new VueRouter({ routes: Routes, mode: 'hash' }); 

Mode mode: 'hash' mode is enabled by default in vue, so it should work even if you leave empty instead of mode: 'hash' .

Answer 4

If someone is dealing with this problem in .NET Core as an application backend, a simple rollback handler in the Startup.cs of our .NET Core application is a good approach:

 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { ....Your configuration app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); //handle client side routes app.Run(async (context) => { context.Response.ContentType = "text/html"; await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html")); }); } } 

For more details: http://blog.manuelmejiajr.com/2017/10/letting-net-core-handle-client-routes.html

Answer 5

For those who see this with the Express backend, there is connect-history-api-fallback middleware , which is implemented as follows.

 const express = require('express'); const history = require('connect-history-api-fallback'); const app = express(); app.use(history({ index: '/' //whatever your home/index path is default is /index.html })); 

Or with a home node

 const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) }) 

Both suggestions are in the documentation .

Answer 6

Has anyone else encountered the same problem, I just realized that

 "book/:bookId/read" // this will not work after page reload 

and it is different

 "/book/:bookId/read" // this is what works even after page reload 

This, of course, after following the advice of other guys, more importantly, is to "catch the whole route" on the side of your application server. I really don't know why this worked, but anyone with ideas can let us know.

Answer 7

I am using Razor Pages with .net core 2.2 and I have succeeded:

 app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller}/{action=Index}/{id?}"); routes.MapRoute( name: "spa-fallback", template: "{*url:regex(^((?!.css|.map|.js|sockjs).)*$)}", defaults: new { controller = "Index", action = "Index" }); }); 

Answer 8

For Netlify, add the following to the public/_redirects ...

 /* /index.html 200 

See https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps