初めに
お久しぶりの投稿です。
Vue.jsにて、入力画面にて入力した内容をボタンを押下時にパラメータをURLで渡して、次の画面へ表示させるものを作成しました。
router.jsを使用しての渡し方となります。
vueの作成
バージョン：
% vue --version
@vue/cli 5.0.8
% node --version
v19.2.0
事前に、「vue create <プロジェクト名>」でプロジェクトを作成し、Routerを選択して作成していることが前提となります。
参考記事：https://qiita.com/azukiazusa/items/fd82b3c35929add9dafe
今回の階層です。
src---router
|---|--index.js（遷移情報記載：ソース添付）
|-views
|---|--SearchJoken
|---|---|components
|---|-----|--HosokuSetsumei.vue（タイトルのみ：ソース割愛）
|---|-----|--SearchJoken.vue（入力フォーム：ソース添付）
|---|-----|--TitileMidashi.vue（タイトルのみ：ソース割愛）
|---|---|SearchJokenBaseForm.vue（検索条件の土台フォーム：ソース添付）
|---|--SearchList
|---|---|components
|---|-----|--SearchResult.vue（表示フォーム：ソース添付）
|---|---|SearchListBaseForm.vue（検索条件表示の土台フォーム：ソース添付）
|-App.vue（全体土台フォーム：ソース添付）
|-main.js（全体呼び出し：ソース添付）
router側の準備
→mainに【検索条件画面】、SearchListBaseFormに【検索条件表示画面】を指定します。
propsにパラメータの内容を指定しています。
index.js
import { createRouter, createWebHistory } from 'vue-router'
import SearchList from '../views/SearchList/SearchListBaseForm.vue'
import SearchJokenBaseForm from '../views/SearchJoken/SearchJokenBaseForm.vue'
const routes = [
{
path: '/',
name: 'main',
component: SearchJokenBaseForm
},
{
path: '/SearchListBaseForm/:name/:seibetsu/:address',
name: 'SearchListBaseForm',
component: SearchList,
props: route => ({ name: route.params.name, seibetsu: route.params.seibetsu, address: route.params.address })
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
main側の準備
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
App側の準備
ここが表示の土台となります。
遷移時に画面を切り替える用にここで、router-viewを宣言します。
このrouter-viewの箇所に切り替えるでレイアウトが表示される方針です。
App.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App'
}
</script>
Front側の準備
★(遷移元）
【検索条件画面】
・SearchJoken/SearchJokenBaseForm.vue
→「this.$router.push」に、index.jsで遷移したい画面のnameとパラメータを指定します。
SearchJokenBaseForm.vue
<template>
<TitileMidashi
/>
<SearchJoken
@on-search-joken="onSearchJoken"
/>
<HosokuSetsumei/>
</template>
<script>
import TitileMidashi from './components/TitileMidashi.vue'
import SearchJoken from './components/SearchJoken.vue'
import HosokuSetsumei from './components/HosokuSetsumei.vue'
export default {
name: 'SearchJokenBaseForm',
components: {
TitileMidashi,
SearchJoken,
HosokuSetsumei
},
data() {
return {
searchJoken: {},
}
},
methods: {
onSearchJoken(data) {
this.searchJoken = data
this.$router.push({ name: 'SearchListBaseForm', params: { name: this.searchJoken.name, seibetsu: this.searchJoken.seibetsu, address: this.searchJoken.address, }, })
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
【検索条件入力コンポーネント】
・SearchJoken/components/SearchJoken.vue
→emitで入力内容をやりとりします。
SearchJoken.vue
<template>
<div>
<table align="center">
<tr>
<td>お名前： </td>
<td><input type="text" v-model="name" size="30" placeholder="○○太郎"></td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name='seibetsu' value="1" v-model="seibetsu"/>
<label>男</label>
<input type="radio" name='seibetsu' value="2" v-model="seibetsu"/>
<label>女</label>
</td>
</tr>
<tr>
<td>ご住所： </td>
<td><input type="text" v-model="address" size="30" placeholder="東京都○○区"></td>
</tr>
</table>
<br>
<button
v-on:click="btnClear()">
クリア
</button>
<button v-on:click="btnSearch()">
検索
</button>
<br>
<br>
</div>
</template>
<script>
export default {
name: 'SearchJoken',
props: {
},
data() {
return {
name: '',
address: '',
seibetsu: '',
searchJoken:{
name: '',
seibetsu: '',
address: '',
},
}
},
mount() {
this.init();
},
methods: {
btnSearch() {
this.searchJoken.name = this.name
this.searchJoken.address = this.address
this.searchJoken.seibetsu = this.seibetsu
this.$emit('onSearchJoken', this.searchJoken)
},
btnClear() {
this.init();
},
init(){
this.name = ''
this.address= ''
this.seibetsu = ''
}
},
}
</script>
<style scoped>
</style>
★(遷移先）
【検索条件表示画面】
・SearchList/SearchListBaseForm.vue
SearchListBaseForm.vue
<template>
<SearchResult
v-bind:name-joken="name"
v-bind:seibetsu-joken="seibetsu"
v-bind:address-joken="address"
/>
</template>
<script>
import SearchResult from './components/SearchResult.vue'
export default {
name: 'SearchListBaseForm',
props: {
name: {
type: String,
},
seibetsu: {
type: String,
},
address: {
type: String,
},
},
components: {
SearchResult,
},
data() {
return {
}
},
created: function () {
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
【検索条件表示コンポーネント】
・SearchList/components/SearchResult.vue
→propで値を受け取り、画面表示します。
また戻るボタンでrouterを使用し、メイン画面へ戻ります。
SearchResult.vue
<template>
<div>
<table align="center">
<tr>
<td>お名前： </td>
<td>{{ this.nameJoken }}</td>
</tr>
<tr>
<td>性別：</td>
<td>{{ seibetsu }}</td>
</tr>
<tr>
<td>ご住所： </td>
<td>{{ this.addressJoken }}</td>
</tr>
</table>
<br>
</div>
<br>
<button v-on:click="btnReturn()">
戻る
</button>
</template>
<script>
export default {
name: 'SearchResult',
props: {
nameJoken: {
type: String,
},
seibetsuJoken: {
type: String,
},
addressJoken: {
type: String,
},
},
data() {
return {
}
},
created: function () {
},
methods: {
btnReturn() {
this.$router.push('/')
}
},
computed: {
seibetsu: function () {
return this.seibetsuJoken === "1"?'男':"女"
}
}
}
</script>
<style scoped>
</style>
終わりに
画面間での値を入力と画面遷移と値の表示という基本的なものは挙動しますが、
ただの遷移なので、ご参考までによろしくお願いします。
（また、VeeValidateでのフロントチェックやDBへ検索した結果を表示させるようなものを繋げて、
強化する予定です。）