Vue Router return 404 when revisit to the url

vue-router history mode refresh
vue-router 404
vue-router reload not working
vue router history mode not working
vue-router iis
vue router with express
vue-router get history
vue router remove hash

I just enable Vue router history mode. And it work fine when I visit to vue routing via v-href or href. But, when I try to refresh that page or go directly from browser address bar, it just return 404. Is there any option to accept refresh/revisit to that url?

The following is my Vue router configuration

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

By refreshing the page you are making a request to the server with the current url and the server returns 404. You have to handle this on your web framework or web server level.

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

I just enable Vue router history mode. And it work fine when I visit to vue routing via v-href or href. But, when I try to refresh that page. It just Forum Vue Vue Router return 404 when revisit to the url. SetKyarWaLar. Vue. SetKyarWaLar •. 4 years ago. 1397. 3. Vue.

I think you are missing that SPA is not server side rendering. At least for the majority. So, when you access /anything your web server won't redirect it to index.html. However, if you click on any vuejs router link, it will work due to the fact that the javascript got in action, but not the server side.

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

<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 it helps someone!

Whenever I access a branch component from the router via a bu… the router via a button on the page, it works fine and the url changes to However, if I try to reload the page while inside the router, the page returns a 404. How to use vue-router to redirect to 404 page with invalid URL parameter. Ask Question. Asked 1 year, 3 months ago. Active 1 year, 3 months ago. Viewed 2k times. 2. I use vue-router to navigate the user pages by their user id. And the router.js looks like as follows.

If you don't really care about the hash in the url, you can just set the mode to hash in you router configuration file: mode: 'hash' That works fine without the need to setting up the server side.

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

Hash mode comes by default in vue, so it should work even if you leave blank instead of mode: 'hash'.

I have a simple router setup const router = new Router({ mode: trying to config gh-pages which base url is username.github.io/repo_name/ . Errors on Submit: Vue Formulate has a new error-behavior type of submit to only show errors when a form is submitted. New Named Form Methods: Vue Formulate has new named form methods of reset, resetValidation, and setValues to assist with programatic control of your forms. All this and more! The full changelog is available on the documentation site.

If someone is dealing with this issue in .NET Core as the backend of the app, a nice approach is a simple fallback handler in the Startup.cs of our .NET Core application:

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

bang, I am using history mode: var router = new VueRouter({ routes: routes, mode: 'history' }) However, when I refresh a page, I get a 404 error. If I remove mode: 'history', I can go directly to urls at a path and refresh pages in my browser. const router = new VueRouter ({routes: [{path: '/a', redirect: to => {// the function receives the target route as the argument // return redirect path/location here. Note that Navigation Guards are not applied on the route that redirects, only on its target.

For someone seeing this using an Express backend, there is the middleware connect-history-api-fallback that is implemented like this

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 Native 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 are suggestions in the documentation.

Routing. /App. Is there any option to accept refresh/revisit to that url? to handle this in Vue and redirect it to Is there a way to have the server return a 404 status  A single parameter in the URL prevents developers from utilizing the wildcard effectively. Effectively, vue-router behaves as if infinite variations of a single parameter are valid and there is no way for the user to instead then reject any of those variations. They can cancel the entire routing process or the can redirect but they are unable to communicate to the router the match was determined to not be valid at the that point in time (when a navigation guard is called).

Vue Router return 404 when revisit to the urlVue router server. I also want this URL to be accessible even after finishing the form, so abstract  GitHub Gist: star and fork shahali007's gists by creating an account on GitHub. Skip to content. View Vue Router return 404 when revisit to the url.

And you are right, some user don't do the difference, and ultimatly for a pure front-side user experience it's a better thing to not have different pages behind /bonjour and /bonjour/ so the most common case is just to return 404 from one of two URL OR a 301 redirect from one to other.

# Routing with vue-router. You may have noticed that our server code uses a * handler which accepts arbitrary URLs. This allows us to pass the visited URL into our Vue app, and reuse the same routing config for both client and server! It is recommended to use the official vue-router for this purpose. Let's first create a file where we create

Comments
  • You are right. I have to handle with my web framework or web server level. I will try to check that out. Thanks
  • perfect answer!
  • If you're using an nginx host there's a helpful gist here.
  • could you provide an example?
  • That didn't worked for me, IIS server