使用Vue路由器返回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

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

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

jsonInput.js

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

将JSON对象导入组件

行星.vue

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