Как передать массив в $ router.pu sh в Vue. js?

Question

Я хочу передать данные через функцию VUE на новую страницу одним нажатием кнопки. Я попытался сделать это, используя метод маршрутизатора, но я не смог отправить массив, он просто позволял мне отправить строку с ним.

this.$router.push({
    name: "SalesInvoice",
    params: { SalesInvoice: this.stockmaster }
  });

эта вещь не работает, потому что stockmaster это массив .

this.$router.push({
    name: "SalesInvoice",
    params: { SalesInvoice: "abc" }
  });

То же самое, что я сделал со строкой, и это сработало. так есть ли способ отправки массива на следующую страницу, используя метод vue.

Answer 1

Просто добавив мой комментарий в качестве ответа, чтобы другие могли легко получить его в будущем.

Когда вы пытаетесь передать массив, объект или массив объектов в маршрутизатор, вы должны сначала stringify свои данные с помощью JSON.stringify и передать их маршрутизатору. И затем вы можете получить к нему доступ и проанализировать его обратно в JSON с помощью JSON.parse. Для приведенного выше конкретного случая должно быть сделано что-то вроде следующего:

this.$router.push({
    name: "SalesInvoice",
    params: { SalesInvoice: JSON.stringify(this.stockmaster) }
  });

Answer 2

Для справки, я бы не рекомендовал использовать JSON в качестве параметров URL, а вместо этого использовать query параметры. Если вы хотите отправлять данные из одного запроса в другой, обычно вместо параметров маршрута используются параметры запроса.

В вашем случае измените код на

this.$router.push({
    name: "SalesInvoice",
    query: { SalesInvoice: "abc" }
  });

. Вы можете затем измените ваше определение маршрута на что-то вроде этого

{
  path: 'sales-invoice', 
  name: 'SalesInvoice',
}

Видите, в пути больше нет :SalesInvoice. Параметр маршрута больше не нужен, поскольку вы теперь передаете данные новому маршруту через параметры запроса. Вы можете использовать столько параметров запроса, сколько пожелаете (фактически столько, сколько позволяет максимальная длина URL-адреса), без необходимости определять их в определении маршрута. Это обеспечивает большую гибкость.

Вы можете получить доступ к параметрам запроса аналогично параметрам маршрута, используя this.$route.query.SalesInvoice.