如何将Express路由渲染的数据传递给Vue组件？

你碰到的问题很典型——Express把数据传给Pug模板后，Vue组件并不能直接“共享”这份数据，因为Pug是服务器端渲染的模板，而Vue组件是客户端运行的，两者属于不同的上下文。得手动把数据从Pug传递到Vue组件里，这里有两种靠谱的方法：

方法一：通过Vue Props传递（推荐） #

这是最符合Vue组件化设计的方式，数据流向清晰，不会污染全局作用域。

1. 修改Pug模板，把数据传给Vue组件 #

在myview.pug里，给Vue组件绑定props，注意用Pug的非转义插值!{}把数据转成JSON字符串：

extends ../layout.pug
block content
  results-view(:results='!{JSON.stringify(results)}')

为什么用!{}而不是#{}？因为#{}会自动转义HTML字符，把JSON里的双引号变成"，这样Vue拿到的就是无效的JSON了，!{}会直接输出原始内容，保证JSON格式正确。

2. 在Vue组件里接收Props #

修改results-view.vue，声明接收results这个props，同时指定类型和默认值，避免报错：

<template lang="pug">
li(v-for='result in results' :key='result.text')
  span {{ result.text }}
</template>
<script>
export default {
  props: {
    results: {
      type: Array,
      required: true,
      // 给个默认空数组，防止没传数据时组件报错
      default: () => []
    }
  }
}
</script>

另外别忘了给v-for加上:key，这是Vue的要求，能提升渲染性能，避免警告。

方法二：挂载到全局window对象（适合简单场景） #

如果你的项目比较简单，不想折腾props，也可以把数据挂载到全局window上，让Vue组件直接读取：

1. 在Pug模板里定义全局数据 #

extends ../layout.pug
block content
  // 先把数据挂载到window上
  script.
    window.appData = {
      results: !{JSON.stringify(results)}
    }
  // 再渲染Vue组件
  results-view

2. 在Vue组件里读取全局数据 #

<template lang="pug">
li(v-for='result in results' :key='result.text')
  span {{ result.text }}
</template>
<script>
export default {
  data() {
    return {
      // 从全局对象获取数据，加个兜底空数组
      results: window.appData?.results || []
    }
  }
}
</script>

这种方法虽然简单，但会污染全局作用域，大型项目里不推荐使用，容易引发变量冲突。

小提醒 #

你的Express路由里res.render("/myview",output)其实不需要前面的斜杠，写成res.render("myview", output)更规范，不过这个不影响数据传递就是了。

内容的提问来源于stack exchange，提问作者Jean