Python Flask 模板传值给前端页面
- 2026-01-17 18:54:47
前言
最近在项目开发中遇到这样一个问题：后端使用的是 Python Flask 框架，渲染方式为后端渲染。而前端使用的 Vue 技术栈。页面的显示通过后端渲染生成的 dist 包中的 index.html 文件来实现。由于项目的历史包袱，后端需要传值给前端，前端需要在某些组件中使用后端渲染传递过来的值。但是有一点略坑：后端渲染时只能识别 vue 生成的 index.html，在 vue 中是无法直接通过 {{ 参数名 }} 的方式直接获取传入参数 。本文对于这个问题给出三种可行的解决方案。
后端如何传值
Python Flask 框架中使用 render_template 函数来渲染对应的模板，该函数的第二个参数就是传入的参数。示例代码如下：
@app.route('/test')deftest_pass_parm(): parm_value = 'I am value from backend'return render_template('test/dist/index.html', parm_value)上面代码是一个 Flask 中比较常规的写法。parm_value 是后端要传给 index.html 模板中的值， index.html 是 Vue 中生成的打包文件。在 index.html 中，可以使用 {{ parm_value }} 在模板中展示后端传入的值。
PS: Python Flask 渲染时，可能会因为 {{ }} 符号原因，与 vue 的插值语法有冲突，后端无法识别并正常渲染，需要修改 Vue 的分隔符 delimiters 项来避免后端渲染错误。
Vue 中如何获取
方式一
通过 index.html 中的 title 渲染值，在 vue 组件中通过 document.title 来进行获取。
在 vue 工程中的 index.html 中设置 title 如下：
<head><metachartset=utf-8><title>{{parm_value}}</title></head>当目标打包文件 index.html 被渲染成功后，parm_value 就会被 Flask 识别出来，渲染成传入的值。在 Vue 组件中，可以进行以下的处理：
mounted(){ //1. 通过 document.title 获取值 this.pValue = document.title //2. 重新设置 document.title 为正常的网页 title document.title = "测试网页标题"}在 vue 组件中，pValue 就是后端渲染传入的值了。
方式二
在 index,html 中添加一个与 app 同级的 dom 节点
<html><head><meta><title></title></head><body><inputid="test-dom"type="hidden"value="{{parm_value}}"><divid="app"></div></body></html>也许你会问一个问题，为什么不将 dom 结点放在 div#app 内部？答案很简单：因为生成的 dom 节点若在 div#app 内，运行时会被替换掉，在 vue 组件中无法获取到对应的 dom 节点。
在 vue 组件中处理：
mounted() { // 1. 获取对应的 dom 节点let testDom = document.getElementById('test-dom') // 2. 获取 dom 节点对应的值let pValue = testDom.value}方式三
在 index.html 中新增 script 标签进行渲染，通过 window.xxx 进行获取
<html><head><meta><title></title></head><body><inputid="test-dom"type="hidden"value="{{parm_value}}"><divid="app"></div><script>window.pValue = '{{parm_value}}'</script></body></html>在 vue 组件中，通过 window.pValue 直接获取渲染值。
总结
以上，就是 Vue 前端工程中获取后端渲染方式传递值的三种方式。个人推荐第二、三种方式，孰优孰劣，可斟酌使用。由于项目是从后端渲染模板的方式逐渐升级为前后端分离的方式，在此过程中遇到了这个问题，梳理并总结出来，供后续查阅，避免再次入坑。
参考
python flask 总结以及一些各种传值问题[1]
Flask 向模板（template）传递多个参数或者把全部的本地参数传递给 template[2]
python flask 总结以及一些各种传值问题: https://blog.csdn.net/MooKee_cc/article/details/52947332
[2]Flask 向模板（template）传递多个参数或者把全部的本地参数传递给 template: https://blog.csdn.net/iTaacy/article/details/51941495
