Vue.js 前端路由与后端烧瓶路由冲突

Question

我的后端是python + flask，前端是vuejs。

我的路线：

在烧瓶中，我只有 2 条路线：

• 404
• /

但是在 vuejs 的路由中：

• /
• /搜索
• /关于
• /联系方式

我遇到的问题是这样的：

当我访问myname.com/search时

在本地开发中访问

0.0.0.0:8001/search

没关系

访问服务器：

myname.com/search

它给了我404，因为这不是烧瓶中的路线

我想我知道为什么会发生这种情况，但我不知道如何解决它，等待一些帮助。

Answer 1

我遇到了同样的问题，并通过Flask catch-all rules 解决了它。 Flask 将捕获 url /books，然后将其传递给 Vue 应用程序。

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')               # url /books will fail into here
def index(page):
    return app.send_static_file('index.html')

Answer 2

如the documentation for vue-router中所述：

使用历史模式时，URL 看起来“正常”，例如http://oursite.com/user/id。漂亮！

但问题来了：由于我们的应用程序是单页客户端应用程序，没有适当的服务器配置，如果用户直接在浏览器中访问http://oursite.com/user/id，将会收到 404 错误。现在这很难看。

不用担心：要解决此问题，您只需向服务器添加一个简单的全能后备路由即可。如果 URL 不匹配任何静态资源，它应该提供您的应用所在的同一 index.html 页面。再次美丽！

看来您要么需要配置服务器以正确处理此类请求，要么无法让您的网址看起来“正常”（没有哈希）并且仍然能够直接链接到那个页面。

---

在一个有点相关的示例中，您会注意到，如果您使用 Gmail（一个单页应用程序，就像您正在构建的那样），指向设置页面的链接不是“正常”链接，而是而是在哈希 (#) 之后列出正在访问的特定页面：https://mail.google.com/mail/u/0/#settings/general。

---

This GitHub project，链接自 vue-router 文档，它很好地概述了您的 Flask 服务器可能需要做什么来处理使用“正常” URL 的传入请求：

1. 拦截传入的请求。
2. 检查 URL 以确保它没有请求静态文件。
3. 重定向/重写请求的 URL，以便将其路由到正确的端点。

---

相关SO问题：Vue Router return 404 when revisit to the url