vue-router does not redirect

Question

Despite of multiple posts on the subject I can't find what is going wrong. I been followed this example.

Here is my VueRouter instance.

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      component: require("./components/producer-table.vue").default
    },
    {
      path: "/producer/:producerId",
      component: require("./components/variable-table.vue").default,
      props: true
    },
    { path: "*", redirect: "/" }
  ]
});

If I route to a wrong url programmatically (this.$router.push({path: "/wrong});) I am redirected to http://localhost/.

Everything seems to work fine except that when I set a wrong address in Chrome url bar I get the following message:

Cannot GET /wrong

I would expect http://localhost/wrong to be redirected to http://localhost/. I'm quite new using vue router and I'm must miss something. Any ideas?

This is explained in the [docs](https://router.vuejs.org/guide/essentials/history-mode.html). — Decade Moon, May 09 '19 at 12:54

score 3 · Accepted Answer · answered May 09 '19 at 12:50

This is because your webserver doesn't know GET /wrong should be redirected to the index.html file; from there on, vue-router can take over.

Some examples on how to redirect different web servers;

Apache: htaccess rewrite all to index.html

nginx: Rewrite all requests to index.php with nginx

webpack-dev-server:

/// in your webpack.config
devServer: {
  historyApiFallback: {
    index: '/'
  }
}

vue-router does not redirect

1 Answers1