nuxtで画面遷移時のパラメータ受け渡し(params, query)

Nuxt.js

nuxtで画面遷移を試してみました。
QueryパラメータとURLパラメータについて書いています。

nuxtで画面遷移するときのパラメータ渡し

nuxtで画面遷移する時には、URLに /test?name=hoge などで値を渡す、クエリパラメータを使う方法と
/test/hogeのようにURLに値を埋め込む方法があります。

Queryパラメータ

データをクエリパラメータで渡す。

Queryパラメータとして渡すには、router.pushで渡すオブジェクトにpathとqueryを記載します。
pathのところに画面のパスを書いて、queryに渡すデータを並べて書きます。

movePage(flag) {
  this.$router.push({ path: 'form-query-result-test' , query :{ name: this.name, email: this.email, password: this.password }});
}

上記のように書いてアクセスすると下記のようにパラメータが作られてデータが渡されることが確認できます。

http://localhost:3000/form-query-result-test?name=name&email=email&password=password

クエリパラメータを受け取る

route.queryの配下にそれぞれ渡したデータが入っているので、参照するとアクセスできます。

  <v-row justify="center">
    <v-col cols="9">
      <h2>クエリーパラメータ取得結果:route.query</h2>
      {{ this.$route.query.name }}<br>
      {{ this.$route.query.email }}<br>
      {{ this.$route.query.password }}<br>
      <v-btn color="cyan" @click="returnPage()">戻る</v-btn>
    </v-col>
  </v-row>

urlパラメータ

複数のパラメータ渡し

urlパラメータとしてデータを渡すには、まずpagesの配下にパラメータのフォルダを作って、最後にindex.vueを配置します。
具体例として、下記のようにデータを渡す場合(name, email, passwordをパラメータとして渡す)

http://localhost:3000/form-params-result-test/:name/:email/:password

pages配下のフォルダを下記のように配置します。

├── form-params-result-test
│   └── _name
│       └── _email
│           └── _password
│               └── index.vue

そして下記のようにパラメータを渡します。

this.$router.push({ path: `form-params-result-test/${this.name}/${this.email}/${this.password}` });

idを渡して遷移する

3つもURLで渡すことはあんまり無いと思いますが、users/:id のようにidでデータアクセスする場合はよくパラメータ渡しになっていたりします。

その場合は_id.vueでファイルを作って、フォルダは下記のように配置して

└── users
    └── _id.vue

下記のようにパラメータを渡します。

this.$router.push({ path: `users/999` });

urlパラメータを受け取る

queryのところがparamsに変わっただけですね。
idも同様にparams.idで取得できます。

  <v-row justify="center">
    <v-col cols="9">
      <h2>URLパラメータ取得結果:route.params</h2>
      {{ this.$route.params.name }}<br>
      {{ this.$route.params.email }}<br>
      {{ this.$route.params.password }}<br>
      <v-btn color="purple" @click="returnPage()">戻る</v-btn>
    </v-col>
  </v-row>

戻る・進む

画面遷移後、元の画面に戻る時は

this.$router.go(-1);

逆に進む場合は

this.$router.go(1);

で実装できるようです。

サンプル

実装して試してみたものを、この辺に置いてます。
https://github.com/YasuakiHirano/poc-nuxt/tree/master/pages

参考

VueRouterプログラムによるナビゲーション
404 | Vue Router
The official Router for Vue.js

コメント

タイトルとURLをコピーしました