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
参考
nuxtルーティング
ルーティング
多くのウェブサイトでは単一のページではなく、複数ページを持っています。例えばホームページ、概要ページ、お問い合わせページなどです。これらのページを表示するにはルーターが必要です。
VueRouterプログラムによるナビゲーション
404 | Vue Router
The official Router for Vue.js
コメント