Question

我正在尝试在Vuejs中制作一个简单的网页。

我有一个Main.vue页面，其中包含一个json文件的导入，并且此json文件包含某些参数。其中之一是对象数组，其每个元素都有一个字符串，该字符串指示要在序列中接下来显示的页面。该页面还从该对象获取数据。因此，Main.vue可以访问json文件文件的每个字段和对象，并根据存储在该对象数组中的信息按顺序显示页面（page1，page2，page3 ...）。

这些页面（page1，page2，page3 ...）需要是通用的，没有对特定json文件的引用，并且需要显示来自json数组的特定对象的信息。

我知道如何通过URL将数据传递到页面（例如，“ page1”知道数组的哪个元素必须从中获取信息，因为Main.vue在URL中指定了信息），但是我不知道如何我可以使MyJson符合“ page1”，“ page2”，而不必在每页中都输入MyJson的句子。

我没有后端或类似的东西，只有一个完全在浏览器中执行的前端。

我想知道是否有任何方法可以在没有后端的情况下从page1，page2，page3 ...访问MyJson。

非常感谢

致谢

米格尔

我已经尝试通过URL传递信息，但是效果不理想。

PS：这是我的json

MyJson.json
{
    "id"="whatever"
    "text"="whatever"
    "myArray"=[
        {
            "whichPageHasToRenderMe"="page1"
            "myData"= ...
            ...
        },
        {
            "whichPageHasToRenderMe"="page2"
            "myData"= ...
            ...
        },
        {
            "whichPageHasToRenderMe"="page1"
            "myData"= ...
            ...
        },
        {
            "whichPageHasToRenderMe"="page1"
            "myData"= ...
            ...
        }   
    ]
}

Answer 1

如果您将json文件作为静态文件提供。您可以使用fetch api或任何其他提取库来访问您的json文件。

fetch('path/to/your.json')
  .then(response => response.json())
  .then(data => {
    // do something
  })

详细了解Fetch API。

如果您要传递一些json数据作为url查询。不要忘记使用encodeURIComponent或btoa来转义一些特殊字符。

window.open('/some/path?data=' + encodeURIComponent(JSON.stringify(data)))

Answer 2

我已经通过使用Vuex并将JSON设置为Vuex的状态解决了它，因此可以从其他页面访问它。

在页面中显示JSON，而无需在vuejs中使用导入

2 个答案: