带Flask服务器的Vue.js。。。直接在浏览器中输入url不会使用vue.js进行渲染。

我有vue.js客户端代码和flask服务器后端代码。如果我单击浏览器应用程序中的各种链接，这些链接将从后端获取（使用axios）数据并正确呈现数据，例如，如果我有到的路由器链接。但如果我直接在浏览器地址栏中输入相同的url，我将从服务器返回原始json（即，它不会通过vue.js在html表中呈现）。我正在我的router.js文件中使用模式：“history”

我已经浏览了SO上的其他相关查询，但仍然无法准确掌握我需要做什么来实现这一点（他们似乎都建议使用历史记录模式，我就是。在其他情况下，他们说我需要配置flask来处理此类请求……但没有明确说明我需要做什么来处理此类请求）。有人对此有明确的想法吗

Router.js File
==============================
export default new Router({
  routes: [
    { path: "/",        name: "home",   component: Home  },
    { path: "/about",   name: "about",  component: About },
    { path: "/ping",    name: "Ping",   component: Ping  },
    { path: "/books",   name: "Books",  component: Books },

    { path: "/*", name: "NotFound", component: NotFound } /*Catch All*/ 
  ],
  mode: "history"
});

下面是我的烧瓶应用程序的摘录

Flask App.py
============
from flask import Flask, jsonify, request, send_from_directory, render_template
from flask_cors import CORS

# instantiate the app
app = Flask(__name__, static_url_path='', static_folder='static')
app.config.from_object(__name__)
CORS(app)
...
...
@app.route('/books', methods=['GET'])
def GetAllBooks():
... 
... 
@app.route('/')
@app.route('/index.html')
def index():
    return app.send_static_file('index.html')

@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)

if __name__ == '__main__':
    app.run()

Flask App.py
============
从flask导入flask、jsonify、request、从\u目录发送\u、呈现\u模板
从LASKU cors进口cors
#实例化应用程序
app=Flask（\uuuuu name\uuuuuuu，static\u url\u path=''，static\u folder='static'）
app.config.from\u对象（\u名称\u）
CORS（应用程序）
...
...
@app.route（'/books'，methods=['GET']）
def GetAllBooks（）：
... 
... 
@应用程序路径（“/”）
@app.route（'/index.html'）
def index（）：
返回app.send\u静态文件（'index.html'）
@应用程序路径（“/”）
def静态_文件（路径）：
返回应用程序。发送静态文件（路径）
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
app.run（）

下面是我点击“书籍”链接时呈现的表格

下面是直接在地址栏中输入url时返回的数据。

---

我遇到了同样的问题，并用计算机解决了它。Flask将捕获url

/books

，然后将其传递给Vue应用程序。由于您已在Vue中激活了

模式：“历史记录”

，因此将呈现组件

book

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

@app.route('/static/<path:path>')
def static_file(path):
    return app.send_static_file(path)

@app.route（'/'，默认值={'path'：''}）
@app.route（“/”）#url/书籍将无法进入此处
def索引（第页）：
返回app.send\u静态文件（'index.html'）
@app.route（“/static/”）
def静态_文件（路径）：
返回应用程序。发送静态文件（路径）

在我的例子中，我使用这个。更多

从烧瓶导入烧瓶，渲染模板，中止
从jinja2导入模板NotFound
app=Flask（\uuuuu name\uuuuu，static\u folder=“./static”，template\u folder=“./templates”）
@app.route（'/'，默认值={'path'：''}）
@应用程序路径（“/”）
def索引（路径）：
尝试：
返回渲染模板（'index.html'）
除TemplateNotFound外：
中止（404）
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
app.run（debug=True）

现在URL localhost:5000/about将被重定向到index.html，vue路由器将在自身内部处理它

from flask import Flask, render_template, abort
from jinja2 import TemplateNotFound

app = Flask(__name__, static_folder="./static", template_folder="./templates")


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    try:
        return render_template('index.html')
    except TemplateNotFound:
        abort(404)


if __name__ == '__main__':
    app.run(debug=True)