我的后端是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 的传入请求:
- 拦截传入的请求。
- 检查 URL 以确保它没有请求静态文件。
- 重定向/重写请求的 URL,以便将其路由到正确的终结点。
相关 SO 问题:Vue 路由器在重新访问 url 时返回 404