is the way of pass data with JSON.stringfy correct way?

Question

I just started a vue.

I want to send an object array from homeView to SampleView. After searching some information, I used JSON.stringify() and was able to get the data.

The data form I want to send is like below

words: [
    { key: "key", word: "test-name", definition: "test-definition", text: '' },
    { key: "key", word: "test-name", definition: "test-definition", text: '' },
    { key: "key", word: "test-name", definition: "test-ddd", text: '' },
]

<v-btn size="small" :to="{ name: 'WordGame', query: {gameWords: JSON.stringify(words)}}" class="float-right">단어 게임</v-btn>

what I'm curious about is that it is normal way to send an object data by query string?

And what way could I make code better?

HomeView.vue

<template>
  <div class="ma-5">
    <v-row>
      {{ this.date }}
    </v-row>
    <v-row justify="end">
      <v-btn size="small" class="float-right me-1" @click="hideDefinition">{{ hideButton }}</v-btn>
      <v-btn size="small" href="/words/new" class="float-right me-1" v-if="isToday">추가하기</v-btn>
      <v-btn size="small" :to="{ name: 'WordGame', query: {gameWords: words} }" class="float-right">단어 게임</v-btn>
    </v-row>
  </div>
</template>

SampleView.vue

<template>
  <div class="ma-5">
    <v-row
        v-for="word in gameWords"
        :key="word.key"
    >
      <v-col>
        <v-card
            :text="word.word"
        >
        </v-card>
      </v-col>
      <v-col>
          <v-text-field v-model="word.text">

          </v-text-field>
      </v-col>
    </v-row>

    <v-row class="me-1" justify="end">
      <v-btn @click="submit">
        제출
      </v-btn>
    </v-row>
  </div>
</template>

<script>

export default {
  mounted() {
    this.init();
  },
  props: ['gameWords'],
  methods: {
    init() {
      console.log(this.$route.query.gameWords)
    },
  }
}
</script>

router.js

const router = createRouter({
    history: createWebHistory(),

    routes: [
        {
            path: '/word-game',
            name: 'WordGame',
            component: () => import('../views/SampleView.vue'),
            props: true
        },
    ]
});

App.vue

<template>
  <v-app>
    <v-main>
      <v-container>
        <voca-header></voca-header>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

Why not just `:to="{ name: 'WordGame', query: {gameWords: words}}"`…? — deceze, Mar 16 '23 at 10:34
Does this answer your question? [Vue, is there a way to pass data between routes without URL params?](https://stackoverflow.com/questions/50998305/vue-is-there-a-way-to-pass-data-between-routes-without-url-params) — Wimanicesir, Mar 16 '23 at 10:38
@deceze I've been tried the way. But it only shows "[object Object]".. — Byeongsu KIM, Mar 16 '23 at 10:42
@Wimanicesir Unfortunately, it doesn't solve my problem. My output is "[object Object]" with the first method in the link — Byeongsu KIM, Mar 16 '23 at 10:53
@EstusFlask Is it a good way to set global data for one page? I'm a newbie But for me, it seems unnatural.. — Byeongsu KIM, Mar 16 '23 at 13:31
Global store is a way to exchange data through the app. So generally, yes. It's less unnatural than exposing internal data in url because the router cannot work in another way. On the other hand, if you want data to be persisted when this url is reopened, e.g when a browser crashed, then use a query — Estus Flask, Mar 16 '23 at 14:23

score 0 · Answer 1 · answered Mar 16 '23 at 10:48

0

You can assign words directly, no need to use JSON.stringify

:to="{ name: 'WordGame', query: {gameWords: words} }"

Output

{ "name": "WordGame", "query": { "gameWords": [ { "key": "key", "word": "test-name", "definition": "test-definition", "text": "" }, { "key": "key", "word": "test-name", "definition": "test-definition", "text": "" }, { "key": "key", "word": "test-name", "definition": "test-ddd", "text": "" } ] } }

Also, There are different possible ways to pass the props but I would suggest passing the data separately, e.g:

<v-btn size="small" name='WordGame' :gameWords={words}" class="float-right">단어 게임</v-btn>

OR

<v-btn size="small" name='WordGame'  query={gameWords: words} class="float-right">단어 게임</v-btn>

answered Mar 16 '23 at 10:48

Monish Khatri

820
1
7
24

Thank you for your answer ! I tried the way u directed, But the output is http://localhost:8089/word-game?gameWords=[object+Object] – Byeongsu KIM Mar 16 '23 at 10:50
Okay, I thought you wanted to pass props in another component.Can you please share the full code? So everyone can get a clear idea. – Monish Khatri Mar 16 '23 at 12:18
I added my full code. Thank you ! – Byeongsu KIM Mar 16 '23 at 13:28

score 0 · Answer 2 · answered Mar 17 '23 at 08:08

If you don't want to expose your parameters in the url, you can pass parameters using the router's params property.

<v-btn size="small" :to="{ name: 'WordGame', query: {gameWords: words} }" class="float-right">단어 게임</v-btn>

Change query to name

<v-btn size="small" :to="{ name: 'WordGame', params: {gameWords: words} }" class="float-right">단어 게임</v-btn>

In SampleView.vue you should use params to receive parameters.

export default {
  mounted() {
    this.init();
  },
  props: ['gameWords'],
  methods: {
    init() {
      console.log(this.$route.params.gameWords)
    },
  }
}

is the way of pass data with JSON.stringfy correct way?

2 Answers2