我正试图在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"= ...
...
}
]
}
如果您将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)))
我已经通过使用Vuex并将JSON设置为Vuex状态来解决它,因此可以从其他页面访问它。