[Vue.js] Vuex를 기본으로 구성한 프로젝트에서 URL의 파라미터 값들을 저장 후 필요시 호출하는 방법 ( 이전 페이지 이동시 파라미터값들을 유지하는 방법)

라우터를 사용하여 파라미터 값들을 전달하는 방법은 2가지가 있다. 하나는 params 방식이고 또 하나는 query를 사용하는 방식이다.  메인페이지에서 다른 페이지를 호출하여 페이지 이동이 발생했다고 하자. 이전 페이지로 돌아올 때 메인페이지에서 조회했던 검색 조건들을 유지해서 다시 보여줘야하는데, $router.go(-1)과 같은 윈도우 히스토리 백을 사용중이라면 어떻게 해야 검색조건을 유지할 수 있을까?????

라우터(router)를 사용하여 vue.js 프로젝트를 구성하였을 때 

• 뒤로 돌아가기시 this.$router.go(-1)를 할 경우 라우터를 거치지 않음으로 , this.$route.params 정보를 가져올 수 없다. (undefined)
• params 방식이 아닌 query 방식으로 전달해도 어쟀든 라우터를 거치지 않음으로 $this.$route.query 정보 역시 가져올 수 없다. 

• this.$router.push({ name: ‘CompanyDetail’, params: param, query: { searchStr: this.query.searchStr, calltime: moment(new Date()).format(‘YYYYMMDDhhmmss’) } });

[해결방법]

페이지 이동하기 전에 vuex 구성 정보에 파라미터와 값 정보를 가지고 있도록 처리해준다.

그리고 라이프 사이클 중에 created()에서 저장해둔 파리미터 정보를 가져와서 대입시켜준다. 

  created() {
    console.log('####lifecycle : created called');
	if (this.$route.params.startDate !== undefined) {
		this.query.startDate = this.$route.params.startDate;
	} else {  
		//router.go()를 할 경우 라우터를 거치지 않음으로 else문을 탄게 된다.
		const routeParams = this.$store.getters.getRouteParams(this.$route.name);
		this.query.startDate = routeParams.startDate;
		this.query.searchStr = routeParams.searchStr;
		console.log(`####routeParams.startDate : ${routeParams.startDate}`);
		console.log(`####routeParams.searchStr : ${routeParams.searchStr}`);
	}
  },

Vuex 기본 구성 정보

[index.js]

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import mutations from './mutations';
import getters from './getters';
import actions from './actions';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
});

[state.js]

export default {
  userMenu: null,
  userId: null,
  
  routeParams: {},
}

[mutations.js]

export default {

  setUserMenu(state, replace) {
    const s = state;
    s.userMenu = replace;
  },
  setUserId(state, replace) {
    const s = state;
    s.userId = replace;
  },
  
  setRouteParams(state, replace) {
    const s = state;
    s.routeParams[replace.routeName] = replace;
  },  
};

[getters.js]

export default {

  getUserMenu: state => state.userMenu,
  getUserId: state => state.userId,
  
  /**
   * Router Parameter($route.params)를 저장하기 위한 객체
   * Router Name이 화면의 키가 되며, Name을 통해 저장된 파라메터 객체를 반환
   * (데이터구조)
   * {
   *    Company: {compId: A1},
   *    CompanyDetail: {compId: A1, contId: C1}
   * }
   */
  getRouteParams(state) {
    const s = state;
    return (routeName) => {
      const retVal = s.routeParams[routeName];
      return retVal;
    };
  },	  
}

[actions.js]

import axios from 'axios';

// Store에 데이터를 저장하기 위해 사용해야 할 경우 actions.js 스크립트를 통해 데이터 Commit
export default {

  // 로그인 후 메뉴 및 사용자정보 조회
  getUserInfo({ commit }, payload) {
    const reqUrl = '/test/getMenuInfo.do';
    return axios.post(reqUrl, '').then((rs) => {
      const clsUserInfo = JSON.parse(rs.data.userInfo);

      commit('setUserId', clsUserInfo.UserId);
      commit('setUserNm', clsUserInfo.UserNm);
    }).catch((err) => {
      //오류 발생 시, 로그인페이지로 이동
      payload.router.push('/login');
      throw new Error(err.message);
    });
  },
};

3일간의 삽질 끝에 해결책을 찾았다. 덕분에 라우터 공부가 많이 되었다.