Vue router on page refresh gets 404

0
votes

I am using Vue router with history mode. On button click on the current page I route it to next page. On second page when i reload i get a 404. Is there a way to handle this in Vue and redirect it to home page.

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "first",
      component: First
    },
    {
      path: "/abc",
      name: "abc",
      component: Second,
      props: true
    },
4
javascriptvue.jsvue-router
Possible duplicate of Deploying vue js app and getting 404 error in routes – fjc
I've had this issue before but there's plenty that can cause it. Are you able to set up a jsFiddle or stackblitz to replicate the actual scenario you are facing? – stwilz
I am using a Spring boot embedded jetty container on the backend. Is there a way i could intercept the request before going to server and pass a additional request parameter to it and then handle on my server side – rahul
@stwilz: No it is just a page refresh. Only thing i observed is on button click i make an ajax call with a different path but on page reload the path is the one defined in router. – rahul
Hmmm this could be a few things. Are running this as a website the route would through a 404 if that route doesn't exist. You would need to update your hosting configuration to always point to the application's index.html so that your server knows to serve your application from all routes. If you are serving the application from all routes and Vue isn't rendering the component you wish then your vue-router configuration needs to be updated. – stwilz

4 Answers

3
votes

you can use hash mode inested of history mode to resolve the problem on your router 

let router = new Router({
    mode: "hash",
  routes: [
    {
    //and the urls with path on here ...
0
votes

This is related to how the history mode in Vue Router works. I have created a writeup about it, with a solution as well.

Depends on your server implementation you need to enable URL Rewrites there. Here's how this would be implemented using Express/Node.js:

const express = require('express');
const app = express();
const port = 80;
const buildLocation = 'dist';
app.use(express.static(`${buildLocation}`));
app.use((req, res, next) => {
  if (!req.originalUrl.includes(buildLocation)) {
    res.sendFile(`${__dirname}/${buildLocation}/index.html`);
  } else {
    next();
  }
});
app.listen(port, () => console.info(`Server running on port ${port}`));

For more info, check out https://blog.fullstacktraining.com/404-after-refreshing-the-browser-for-angular-vue-js-app/. HTH

0
votes

if any one of is facing the issue even after trying above solution, please find below method. If you have vue.config.js which has

module.exports = {
  publicPath: process.env.PUBLIC_URL || "", // <-- this is wrong
  ...
};

either remove the vue.config.js or try removing the publicPath from the exports object.

Also you can try below method if you dont want to remove the publicPath

module.exports = {
  publicPath: process.env.PUBLIC_URL || "/", // <-- this is correct now (and default)
  transpileDependencies: ["vuetify"],
};
-1
votes

We have resolved this on backend, we have filter where we intercept the request and redirect it to home page. We have made it configurable.