使用Vue Router返回JSON

Question

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

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

谢谢!

Answer 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对象，否则就会得到我的常规应用程序。

Answer 2

有没有办法让vue组件只有JSON？

创建一个JSON对象并导出它，而不是创建一个仅为JSON的vue组件

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>