使JSON在页面中可见而不使用vuejs中的导入

问题描述 投票:0回答:2

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

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

这些页面(第1页,第2页,第3页......)必须是通用的,不需要引用特定的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"= ...
            ...
        }   
    ]
}
vue.js webpack
2个回答
0
投票

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

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

了解更多关于Fetch API的信息。

如果你想传递一些json数据作为url查询。不要忘记使用encodeURIComponentbtoa来逃避一些特殊字符。

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

0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.