watch 이용

 

 

이전글/ 다음글 클릭시 페이지 넘어가게 하고 싶었는데 

 gonext(next1_num) {
    //   // this.notice_num = next1_num;
    //   window.location = `/moaplace.com/moaplace/news/detail/${next1_num}`;
    //   // if (this.next1 != null) {

    //   // axios
    //   //   .get(`/moaplace.com/moaplace/news/detail/${this.next1.notice_num}`)
    //   //   .then(
    //   //     function (resp) {
    //   //       this.filelist = resp.data.filelist;
    //   //       this.notice_title = resp.data.notice_title;
    //   //       this.notice_content = resp.data.notice_content;
    //   //       this.selected = resp.data.sort_num;
    //   //       this.sort_name = resp.data.sort_name;
    //   //       this.notice_regdate = resp.data.notice_regdate;
    //   //       this.notice_hit = resp.data.notice_hit;

    //   //       this.next1 = resp.data.next;
    //   //       this.prev1 = resp.data.prev;

    //   //       var schedule_date = new Date(this.notice_regdate);
    //   //       this.notice_regdate =
    //   //         schedule_date.getFullYear() +
    //   //         "-" +
    //   //         ("0" + (schedule_date.getMonth() + 1)).slice(-2) +
    //   //         "-" +
    //   //         ("0" + schedule_date.getDate()).slice(-2);
    //   //       console.log("페이지 이동 성공", resp.data);
    //   //     }.bind(this)
    //   //   );
    //   // }
    //   // this.$route.go();
    // },

1)이전글/ 다음글의 정보를 map에 전부 담아 진행

→ 페이지가 넘어가는것이 아닌, 정보를 담아서 보여주는 것, 또한 코드가 매우 김

 

goprev(prev1_num) {
    //   // this.notice_num = prev1_num;
    //   window.location = `/moaplace.com/moaplace/news/detail/${prev1_num}`;
    // },

 

2)window.location 이용

→ 페이지 이동이 생기나, vue이용에 맞는 SPA(Single Pahe Application)에 맞지 않음

 

---

created() {
    this.notice_num = this.$route.params.notice;
    console.log("created: ", this.notice_num);
    this.getdetail();
  },
  watch: {
    $route(to, from) {
      // console.log("to", to);
      // console.log("from", from)
      if (to.path !== from.path) {
        this.notice_num = this.$route.params.notice;
        this.getdetail();
      }
    },
  },

  methods: {
    getdetail() {
      // console.log("메소드 notice_num", this.notice_num);
      // console.log("메소드 notice_detail_num", this.notice_detail_num);
      axios.get(`/moaplace.com/moaplace/news/detail/${this.notice_num}`).then(
        function (resp) {
          this.filelist = resp.data.filelist;
          this.notice_title = resp.data.notice_title;
          this.notice_content = resp.data.notice_content;
          this.selected = resp.data.sort_num;
          this.sort_name = resp.data.sort_name;
          this.notice_regdate = resp.data.notice_regdate;
          this.notice_hit = resp.data.notice_hit;

          this.next1 = resp.data.next;
          this.prev1 = resp.data.prev;

          var schedule_date = new Date(this.notice_regdate);
          this.notice_regdate =
            schedule_date.getFullYear() +
            "-" +
            ("0" + (schedule_date.getMonth() + 1)).slice(-2) +
            "-" +
            ("0" + schedule_date.getDate()).slice(-2);

          /* 다음글 정보가 null 값인지 확인*/

          // console.log("다음글정보:", resp.data.next);
          // console.log("날짜", this.notice_regdate);
          // console.log("파일리스트", this.filelist);
          // console.log("이전글정보:", resp.data.prev);
        }.bind(this)
      );
    },
    gonext() {
      if (this.next1 != null) {
        this.$router.push(
          `/moaplace.com/moaplace/news/detail/${this.next1.notice_num}`
        );
      }
    },
    goprev() {
      if (this.prev1 != null) {
        this.$router.push(
          `/moaplace.com/moaplace/news/detail/${this.prev1.notice_num}`
        );
      }
    },

watch의 특성을 이용해 페이지 이동 + 간단한 코드 완성함