Сделать JSON видимым со страницы без использования импорта в vuejs

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 на каждой странице.

У меня нет серверной части или чего-то подобного, только интерфейс, который полностью выполняется в браузере.

Мне было интересно, есть ли какой-нибудь способ доступа к MyJson со страницы 1, страницы 2, страницы 3 ... без бэкэнда.

Большое спасибо заранее

Привет

Miguel

Я пробовал это, передавая информацию через URL, но это не сработало, как ожидалось.

PS: это мой JSON

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

Answer 1

Я решил это, используя Vuex и установив JSON в состояние Vuex, чтобы он мог быть доступен с других страниц.

Answer 2

Если вы используете свой 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)))