vue-routerにてプロパティを遷移先に渡したい
まずはvue-routerの設定
export default new Router ({ routes: [ { path: '/register', name: 'register', component: CreateUser, }, { path: '/register-result', name: 'register-result', component: ResultOfCreateUser, props: true, }, ], });
このようなものを想定します。
ユーザー登録をして、その結果の画面に遷移するような感じです
遷移先の画面の設定
<template> <div> The result for user creation. <div> user: {{user}} </div> <div> email: {{email}} </div> <div> password: {{password}} </div> </div> </template> <script> export default { props: { user: { required: true, type: String }, email: { required: true, type: String }, password: { required: true, type: String }, }, }; </script>
このようにpropsを設定していたとして、ユーザー登録画面で登録ボタンなどがクリックされたときに遷移させたいとします。
遷移するプログラム
<button type="button" v-on:click="submit" >login</button>
ボタンをクリックしたらsubmit
というメソッドが呼ばれるようにテンプレートを設定
そしてsubmit
の実装が以下。
submit() { this.$router.push({ name: "register-result", params: { user: user.name, email: user.email, role: user.role, password: this.password }; }
このようにparams
として任意のデータを渡してやればpropsに届きます。