CODEWITHSUNDEEP
vue.jsvuejs2vue-router
charlycou
charlycou

Reputation: 1988

vue-router does not redirect

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?

Upvotes: 2

Views: 1913

Answers (1)

Erik Terwan
Erik Terwan

Reputation: 2780

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: '/'
  }
}

Upvotes: 3

Related Questions