Vuejs router.push Get/Post 화면 이동시 데이터 보내기

Vuejs 로 작업중일때 router를 통해 화면을 다른 vue로 바꾸면서 Get/Post로 데이터를  보내고 싶을때가 있다.

이럴때 사용하면된다.

 

Send.vue ===> Receive.vue 로 이동하는 경우를 가정하자.

 

router.js

import Vue from "vue";
import VueRouter from "vue-router";

//vue router
Vue.use(VueRouter);

const routes = [
  { path: "/Send", component: require("./pages/Send.vue").default },
  { path: "/Receive", component: require("./pages/Receive.vue").default, name:"ReceiveTest" }
];

const router = new VueRouter({
  mode: "history", //removes # (hashtag) from url
  base: "/",
  fallback: true, //router should fallback to hash (#) mode when the browser does not support history.pushState
  routes, // short for `routes: routes`
});

export default router;

Post를 사용하기 위해서는 꼭 router에 name 값을 지정해줘야한다. 이유는 하단에.

 

Send.vue 의 script단

=> 데이터를 보내는 vue

//router.vue의 경로로 설정해주세요.
import router from "../../router";

export default {

//methods 부분만 기입하겠습니다. 필요한 곳에 click이든 event로든 사용하시면됩니다.
  methods: {
      GetTest(item) {
      //라우터에서 지정한 path 값
        router.push({ path: "/Receive", query: { id: "Get 확인" } });
      },
      PostTest(item) {
      //라우터에서 지정해준 name 값
        router.push({ name: "ReceiveTest", params: { id: "Post 확인" } });
      }
    }
}

 

Receive.vue 의 script단

==> 데이터를 받는 vue

export default {
  name: "Receive",
  data() {
    return {
    //Get으로 받았을 경우
     id: this.$route.query.id,
    //Post로 받았을 경우
     id: this.$route.params.id,
    };
  },
  created() {
  	//Get으로 받았을 경우
     console.log(this.$route.query.id);
    //Post로 받았을 경우
     console.log(this.$route.params.id);
  },
};

 

created 에서 받아 axios등으로 데이터를 불러와 세팅을해도되고

data 에 담아 필요한곳에 사용하면된다.