2

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
    },
user1
  • 4,031
  • 8
  • 37
  • 66
rahul
  • 67
  • 1
  • 1
  • 6
  • Possible duplicate of [Deploying vue js app and getting 404 error in routes](https://stackoverflow.com/questions/48752650/deploying-vue-js-app-and-getting-404-error-in-routes) – fjc Aug 01 '18 at 09:54
  • 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 Aug 01 '18 at 10:08
  • 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 Aug 01 '18 at 10:14
  • @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 Aug 01 '18 at 10:17
  • 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 Aug 01 '18 at 10:27
  • Is this app a SPA or not? – gil Aug 23 '18 at 10:32

5 Answers5

5

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 ...
zolfaghari
  • 192
  • 3
  • 14
2

This usually happens, when you deploy the page to a hosting server. Check the official docs for more background info and specifiy tipps for different hosting entvironments

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

j7nn7k
  • 17,995
  • 19
  • 78
  • 88
1

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"],
};
Abhi Burk
  • 2,003
  • 1
  • 14
  • 21
0

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

Tamas
  • 10,953
  • 13
  • 47
  • 77
-2

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.

rahul
  • 67
  • 1
  • 1
  • 6