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

Posted 2023-02-22

【中文标题】Vue.js 前端路由与后端烧瓶路由冲突

【英文标题】：Vue.js front-end routing conflicts with back-end flask routing

【发布时间】：2017-12-20 08:14:15

【问题描述】：

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

我的路线：

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

404 /

但是在 vuejs 的路由中：

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

我遇到的问题是这样的：

当我访问myname.com/search时

在本地开发中访问

0.0.0.0:8001/search

没关系

访问服务器：

myname.com/search

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

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

【问题讨论】：

如果您在 vue 路由器中使用 mode: "history"，您是否将服务器配置为使用历史模式？

【参考方案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')

【参考方案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 的传入请求：

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

---

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

【讨论】：

但是，如果我希望用户通过 url 直接访问某些不是静态的内容，我该如何告诉 Vue 重新渲染或采取步骤来渲染所询问的视图？