vue.js - vue-router 不重定向

Question

尽管有多个关于该主题的帖子，但我找不到问题所在。我被关注了这个example .

这是我的 VueRouter 实例。

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: "/" }
  ]
});

如果我以编程方式路由到错误的 url (this.$router.push({path: "/wrong});)，我将被重定向到 http://localhost/。

除了当我在 Chrome url 栏中设置错误地址时，我收到以下消息外，一切似乎都正常:

Cannot GET /wrong

我希望 http://localhost/wrong被重定向到 http://localhost/ .我是使用 vue 路由器的新手，我一定会错过一些东西。有什么想法吗？

Answer 1

这是因为您的网络服务器不知道 GET/wrong 应该重定向到 index.html 文件；从那里开始，vue-router 可以接管。

关于如何重定向不同网络服务器的一些例子；

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