그것을 공통화

라는 이야기입니다.

이사

현재 일로 Vue.js를 쓰고 있어 위의 것을 부탁해 실장했기 때문에 비망록으로서.

사용중인 라이브러리

· Vuex
・Vue Router
· BootstrapVue

흐름

이런 느낌입니다.
・아이 컴퍼넌트(Main.vue)는 워처로 전화면의 정보를 store에 유지시키고 있다.
・손자 컴퍼넌트(Form.vue)로 등록 버튼 눌러, 등록 처리 후에 mixins로 호출한 메소드로 일람 화면에.
· 부모 구성 요소 (app.vue)가 쿼리에 toast_type가 있음을 감지하면 토스트를 표시합니다.
· toast_type가 쿼리에없는 목록 화면으로 이동합니다.



지금 써 있어 생각합니다만, 절대 더 좋은 방법이 있다고 생각한다···.

출처

하위 구성 요소

Main.vue

  watch: {
    '$route': function (to, from) {
      // 前画面情報を取得
      this.$store.commit('from_page_param/setFromPage', {
        full_path: from.fullPath,
        name: from.name,
        path: from.path
      })
    }
  }

store

from_page_param.js

export default {
  namespaced: true,
  state: {
    from_page: {
      full_path: '',
      path: '',
      name: ''
    }
  },

  mutations: {
    setFromPage (state, data) {
      state.from_page.full_path = data.full_path;
      state.from_page.path = data.path;
      state.from_page.name = data.name;
    }
  },

  getters: {
    fromPage: state => {
      return state.from_page;
    }
  }
}

여기까지가 전 화면 정보 유지.

손자 부품

Form.vue
상단에서 myMixin.vue를 가져오고 mixins에 정의한 것으로 가정하십시오.

      onClickSend () {
        this.$loading.load(this.$auth.api.patch(`/admin/hoges/create.json`, {
          hoge: this.hoge
        })
        .then(response => {
          this.transitionProcessed('created', 'IndexPageName');
        })
        .catch(error => {
          if(error.response.status == 422) {
            this.errors = error.response.data.errors;
          }else{
            this.$errorHandlers.ajax(error);
          }
        }))
      },

볼 것이다 this.transitionProcessed('created', 'IndexPageName'); .
이 메소드는 Form.vue에서 import 해 온 myMixin.vue 에 쓰여진 메소드입니다.
첫 번째 인수에는 쿼리, toast_type 의 value용, 두 번째 인수에는 전환할 목록 화면의 이름을 전달합니다.
이 내용이・・・

믹스 인

myMixin.vue

    // 登録処理後などの一覧画面遷移（検索結果保持用）
    transitionProcessed (toast_type, name) {
      let from_page = this.$store.getters['from_page_param/fromPage'];
      if(from_page.full_path && from_page.name === name) {
        this.$router.push({ path: from_page.full_path, query: { toast_type: toast_type } })
      }else{
        this.$router.push({ name: name, query: { toast_type: toast_type } })
      }
    },

이전 화면 정보가 있고 돌아가고 싶은 화면과 앞으로 돌아가는 화면이 일치하면
검색 기준을 유지하고 toast_type를 쿼리에 추가한 목록 화면으로 전환합니다.

상위 구성요소

methods: {
    // クエリからtoast_typeを削除してreplace
    replaceDeletedToast (path) {
      let query = Object.assign({}, this.$route.query)
      delete query['toast_type']
      this.$router.replace({path: path, query: query})
    }
  },

  watch: {
    '$route': function (to, from) {
      if (!!this.$route.query.toast_type){
        if(this.$route.query.toast_type === 'updated') {
          this.$bvToast.toast("更新しました", {
            variant: 'success',
            title: '完了'
          });
        } else if(this.$route.query.toast_type === 'created') {
          this.$bvToast.toast("登録しました", {
            variant: 'success',
            title: '完了'
          });
        } else if(this.$route.query.toast_type === 'deleted') {
          this.$bvToast.toast("削除されました", {
            variant: 'success',
            title: '完了'
          });
        }
        this.replaceDeletedToast(to.path);
      }
    }
  }

toast_type 의 내용으로 표시시킬 토스트를 판단.
토스트 표시 후의 URL은 localhost/admin/hoges/?page=2&toast_type=created와 toast_type가 방해이므로this.replaceDeletedToast(to.path); 안에서 지우고, replace!

결과

다음부터 비동기 처리 후 this.transitionProcessed('created', 'IndexPageName');그냥 쓰면 OK

빠진 곳

app.vue의 이 부분. 실은 처음 replace 는 아니고 push 를 사용하고 있었다

this.$router.replace({path: path, query: query})

이 경우 하나 이전의 이력은 localhost/admin/hoges/?page=2&toast_type=created 와 같은 toast_type 를 포함한 패스가 되고, 브라우저백을 하면(자), 다시 app.vue가 토스트 표시시키고, 쿼리를 지워 $router.push ... 를 연장으로 반복 버린다.

하지만 replace를 사용함으로써 그 전이를 이력에 남기지 않게 할 수 있어 결과적으로 브라우저 백에서 Form.vue의 화면으로 돌아갈 수 있었다.
이것에 대해서는 이쪽의 기사를 참고로 했습니다.
JS에서 브라우저 기록을 조작

후기

더 좋은 방법을 아시는 분이 계시면 코멘트를 주시면 기쁩니다.
엔지니어 경력 1년 기념일의 Qiita 투고였습니다.