使用 Vue 路由器返回 JSON答案

【问题标题】：Returning JSON with Vue Router使用 Vue 路由器返回 JSON
【发布时间】：2018-03-23 18:27:14
【问题描述】：

当用户在我的应用程序上点击 /nav 时，我需要返回一个 JSON 对象。此 JSON 以编程方式使用，不能只是一个字符串。

有没有办法制作一个只有 JSON 的 vue 组件？或者告诉路由器返回 JSON 的方法？

谢谢！

【问题讨论】：

创建一个 json 文件 myinput.json 并将其作为输入添加到您的程序中。
@divine 如何“将其作为输入添加到您的程序中”？
@geoidesic 检查我的答案

标签： vuejs2 vue-component vue-router

【解决方案1】：

我有一个非常相似的问题。我希望 /nav 返回 JSON，但只在我的本地开发服务器上。

所以我刚刚创建了一个vue.config.js 文件（在我的应用根文件夹中）

module.exports = {
  devServer: {
    before: function(app, server) {
      app.get('/nav', function(req, res) {
        const result = { x:1 , y : "hello" };
        res.writeHead(200, {'Content-Type': 'application/json'});
        res.end(JSON.stringify(result));
      });
    }
  }
}

当我运行npm run serve 时使用这些文件，我在导航到/nav 时会得到json 对象，否则会得到我的常规应用程序。

【讨论】：

【解决方案2】：

有没有办法制作一个只有 JSON 的 vue 组件？

不要创建一个只有 JSON 的 vue 组件，而是创建一个 JSON 对象并导出它

jsonInput.js

export const jsonInput = [
  { id: "1", title: "Mars" },
  { id: "2", title: "Venus" },
  { id: "3", title: "Pluto" }
];

将 JSON 对象导入到您的组件中

Planets.vue

<script>
    import {jsonInput } from './jsonInput';
    export default {
      data(){
          return {
              planets : jsonInput 
          }
       }
    }
</script>

【讨论】：

分享被否决的原因比仅仅投反对票更好
可能他们被否决了，因为您还没有定义模板并且使用此代码肯定会收到此错误：Error: render function or template not defined in component: anonymous
我可以在 Vue 路由中提供这个 JSON 对象吗？