使用 Vue 路由器返回 JSON

Posted 2023-02-23

【中文标题】使用 Vue 路由器返回 JSON

【英文标题】：Returning JSON with Vue Router

【发布时间】：2018-03-23 18:27:14

【问题描述】：

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

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

谢谢！

【问题讨论】：

创建一个 json 文件 myinput.json 并将其作为输入添加到您的程序中。

@divine 如何“将其作为输入添加到您的程序中”？

@geoidesic 检查我的答案

【参考方案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 对象吗？