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

Posted 2023-02-23

【中文标题】在 vuejs 中不使用导入使 JSON 从页面可见

【英文标题】：Make JSON visible from page without using imports in vuejs

【发布时间】：2019-09-17 05:44:12

【问题描述】：

我正在尝试用 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"= ...
            ...
           
    ]

【问题讨论】：

如果我理解正确的话，你有一个包含所有导航数据的 json 文件，对吧？你已经在使用vue-router了吗？

@Sumurai8 是的，我已经在使用 vue-router。但是我想我可以通过使用Vuex并将json设置为Vuex的状态来解决问题。

【参考方案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)))

【讨论】：

我想我已经通过使用Vuex并将json文件设置为状态来解决它，但是你说的encodeURIComponent对我也很有用。谢谢！

【参考方案2】：

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