Vue.js로 만든 폼으로 화면 확인

개시하다

많은 서비스는 계좌 등록 등을 통해 사용자가 정보를 입력한 후 입력 내용을 확인하기 위해 준비한 화면이다
SPA가 이 목표를 달성할 때 확인 화면에 데이터를 건네거나 돌아올 때 입력한 내용이 사라져 머리를 안는다.
결과적으로 이런 설치 방법을 소개해 주실 수 있다면 좋겠습니다.

컨디션

Vue.js 2.6.10
vue-cli 3.9.1
vue-router 3.0.3

액션

동작 확인용으로 Giithub에서 코드 전문 향상
https://github.com/tsk-wakabayashi/routing-nest-sample
Gif는 이런 느낌이에요.

해설

기본적으로 이 기능을 사용합니다.
https://router.vuejs.org/ja/guide/essentials/nested-routes.html
간단하게 설명하자면, 플러그인 루트의 아버지 끝에 파라미터가 있다.
App.vue에서 주요한router-view
App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Index.Form 및 Confirm 라우팅에 대한 router-view가 vue에 배치됩니다.
Index.vue

<template>
  <div>
    <div>
      入力
      <span v-if="$route.meta.isConfirm">> 確認</span>
    </div>
    <router-view v-bind:user.sync="user"></router-view>
  </div>
</template>

Form.vue 및 Confirmvue의 부모는 Index입니다.vue가 되면 부모 요소를 통해 데이터를 교환할 수 있습니다.
Form.vue 및 Confirmvue, Index를 오가더라도vue는 마운트 상태이기 때문에 데이터는 계속 저장됩니다.
이 좋은 곳은 브라우저 패키지에도 데이터가 남아있고 사용자들에게도 친절한 곳이에요
Form.vue

<template>
  <div>
    <form v-on:submit="$router.push('/confirm')">
      <div>
        名前
        <input v-model="user.name" type="text" required />
      </div>
      <div>
        パスワード
        <input v-model="user.password" type="password" required />
      </div>
      <button>確認する</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    user: Object
  }
};
</script>

Confirm.vue

<template>
  <div>
    <div>名前: {{ user.name }}</div>
    <div>パスワード: {{ user.password }}</div>
    <button v-on:click="$router.back()">戻る</button>
  </div>
</template>

<script>
export default {
  props: {
    user: Object
  }
};
</script>

라우팅

"/"는 양식의 입력 화면

"/confirm"은 화면을 확인하는 것입니다.

Index의 path에 걸리면 children의 경로가 우선적으로 결정됩니다.
router.js

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Index,
      children: [
        {
          path: "/",
          component: Form
        },
        {
          path: "/confirm",
          component: Confirm,
          meta: {
            isConfirm: true
          }
        }
      ]
    }
  ]
});

이번 샘플은 인덱스입니다.vue에서 아이에게 건네준 데이터를 대상으로 하기 때문에'부모가 마음대로 아이의 데이터를 바꿀 수 없다'는 규칙을 위반할 수 있다.
다만, 입력 항목이 많으면 데이터 연결도 어려워요. 가장 좋은 실천 항목이 있으면 알려주세요.

최후

화면 확인을 준비하는 서비스가 많은데 요즘 경향은 무엇일까
나는 어떤 것들은 모형으로 보낸 것이고, 어떤 것들은 확인되지 않은 것이라고 생각한다
그래도 러터를 끼워 넣으면 다른 용도가 있을 것 같아요.