使用 vue-router 步履蹒跚答案

【问题标题】：Faltering first steps with vue-router使用 vue-router 步履蹒跚
【发布时间】：2017-06-05 17:49:16
【问题描述】：

我正在尝试使用vue-router，但我遇到了第一个障碍。我设置了以下路线：

   const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/', component: Home},
        {name:'product-list', path: '/product/list', component: ProductList},
        {name:'product-detail',path: '/product/:action/:id?', component: ProductDetail },
        {path: '*', component: NotFound }
    ]
});

但是，当我在浏览器中输入这些路由之一的 URL（例如 http://localhost:8090/product/list）时，它会向服务器发出请求，而不是在本地处理它。

我已经设置了我的服务器（在开发中是 Grails），以将任何 404 请求重定向到“/”，这将导致 Home 组件被显示，正如您对路由所期望的那样。但我显然希望/product/list 调出ProductList 组件。

很明显，我在这里误解了一些相当基本的东西。请问这是什么？

【问题讨论】：

你的路由器初始化看起来没问题，我在这里看不到什么奇怪的东西。问题可能出在你的服务器配置中 - router.vuejs.org/en/essentials/history-mode.html
我在关注那些文档，我认为我做的服务器配置是正确的。我想我的误解就在这里。 “如果 URL 不匹配任何静态资产，它应该提供与您的应用程序相同的 index.html 页面。”好吧，我认为我正在这样做，但正如我所提到的，它服务于 Home 组件，而不是路由到“/product/list”。

标签： vue.js vue-router

【解决方案1】：

重定向不好，因为它告诉浏览器更改 url 并重试请求。您需要为所有与静态资源不匹配的请求提供相同的页面。

这可以通过 URL 重写来实现。请参阅您的网络服务器 URL 重写文档。

【讨论】：

这是我出错的地方，被我的代码中的另一个错误所掩盖。谢谢！