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



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

My routes:

在烧瓶中,我只有 2 条路线:

  • 404
  • /

但在 vuejs 的路线中:

  • /
  • /搜索
  • /大约
  • /联系

我遇到的问题是:

当我访问myname.com/search

Visit in local dev

0.0.0.0:8001/search

没事

visitin server:

myname.com/search

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

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

我遇到了同样的问题,并使用 Flask 包罗万象规则解决了它。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')

正如 vue-router 文档中提到的:

使用历史记录模式时,URL 看起来"正常",例如http://oursite.com/user/id.美丽!

但是,这里有一个问题:由于我们的应用程序是单页客户端应用程序,如果没有正确的服务器配置,如果用户直接在浏览器中访问http://oursite.com/user/id,则会收到 404 错误。现在这很丑陋。

不用担心:要解决此问题,您需要做的就是向服务器添加一个简单的 catch-all 回退路由。如果网址与任何静态资产都不匹配,则应提供应用所在的同一index.html页面。再次美丽!

因此,您似乎需要配置服务器以正确处理此类请求,或者无法让您的 URL 看起来"正常"(没有哈希)并且仍然能够直接链接到该页面。


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


这个 GitHub 项目,从 vue-router 文档中链接到,它很好地概述了你的 Flask 服务器可能需要做什么来处理使用"普通"URL 的传入请求:

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

相关 SO 问题:Vue 路由器在重新访问 url 时返回 404

最新更新