quasar vue 3 js - 게시판 만들기 7 - router 페이지 추가하기

https://godffs.tistory.com/3806

vue 3 js - 게시판 만들기 6 - 공용(글로벌) js를 만들어서 사용해보자

이어서...

---

Vue 라우터란?

- vue router 는 공식 라이브러리

- 페이지를 이동할때 서버에 요청해서 불러오는 방법이 아닌 미리 해당 페이지를 받아 놓고 페이지 이동

- 화면 전환이 깔끔하다

 

 

this.$router ==  VueRouter 인스턴스임
fullPath : 전체경로
hash : # 뒤에 오는 경로
metched : 부모 라우트를 포함한 모든 라우트 객체 배열
meta : 메타 정보
name : 이름
params : 매개변수
path : 경로
query : ?뒤에 붙어있는 url 주소

 

 

글쓰는 페이지를 만들고 router.js를 추가한다

 

src \ pages \ community \ GuestBookWrite.vue 파일 추가

<template>
  <div class="row">
    <div class="row">
      <div class="col">
        <div class="q-pa-md row q-gutter-md">글쓰기 페이지 입니다</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>

src \ router \ routes.js 내용 추가

//방명록 주소
path: "/guestbook",
component: () => import("src/layouts/community/LayoutGuestBook.vue"),
children: [
    {
        // 방명록 기본 페이지
        path: "",
        component: () => import("pages/community/GuestBook.vue"),
        redirect: "/guestbook/index", // /guestbook 들어왔을때 /guestbook/index 주소로 변경
    },
    {
        // 방명록 기본 페이지
        path: "index",
        component: () => import("pages/community/GuestBook.vue"),
    },
    {
        // 방명록 글쓰기 페이지
        path: "write",
        name: "guestWrite",
        component: () => import("pages/community/GuestBookWrite.vue"),
    },
],

 

게시글 가져오는 페이지에서 버튼을 추가해서 클릭하면 페이지 이동되게 수정한다

src \ pages \ community \ GuestBook.vue 수정하기

<template>
  <div class="row">
    <div class="row">
      <div class="col">
        <div class="q-pt-md q-pl-md q-gutter-md">
          <!-- 버튼 클릭으로 페이지 이동 -->
          <q-btn
            color="blue"
            text-color="black"
            label="글쓰기"
            @click="btnWrite"
          ></q-btn>

          <!-- a href 태그와 같이 사용가능한데 페이지가 새로고침 처럼 깜빡 거리지 않고 페이지 이동이 가능 -->
          <router-link to="/guestbook/write">글쓰기</router-link>
        </div>
        <div class="q-pa-md row q-gutter-md">
          <!-- 컴포넌트 선언 + api 결과값 this.boardList로 prop 넘김 -->
          <ComBoardList :items="this.boardList"></ComBoardList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const baseURI = "/api/problem";
import ComBoardList from "src/components/community/ComBoardList.vue"; // 컴포넌트 선언
import { defineComponent, ref } from "vue";

export default defineComponent({
  // 컨포넌트를 등록
  components: { ComBoardList },

  setup() {
    return {
      boardList: ref([]), // boardList 초기화
    };
  },
  /*
   * beforeCreate, created 를 제외 하고 setup 메서드에서 액세스 할 수 있는 옵션 api 가 9개 있다
   *
   * Composition API: Lifecycle Hooks
   * onBeforeMount– 마운팅이 시작되기 전에 호출됨
   * onMounted– 컴포넌트가 마운트될 때 호출됨
   * onBeforeUpdate– 반응 데이터가 변경되고 다시 렌더링되기 전에 호출됩니다.
   * onUpdated– 다시 렌더링 후 호출
   * onBeforeUnmount– Vue 인스턴스가 파괴되기 전에 호출됨
   * onUnmounted– 인스턴스가 소멸된 후 호출
   * onActivated– 연결 유지 구성 요소가 활성화될 때 호출됩니다.
   * onDeactivated– 연결 유지 구성 요소가 비활성화될 때 호출됩니다.
   * onErrorCaptured– 자식 구성 요소에서 오류가 캡처될 때 호출됩니다.
   */
  created() {
    this.pageLoad();
  },

  methods: {
    pageLoad() {
      this.$axios.get(`${baseURI}/guestbook_read`).then((result) => {
        this.boardList = result.data;
      });
    },
    // 버튼 클릭 페이지 이동
    btnWrite() {
      // this.$router.push("/guestbook/write");  // url로 이동하기
      this.$router.push({ name: "guestWrite" }); // router에 name으로 이동하기
    },
  },
});
</script>

 

 

quasar-project-js-7.zip

0.21MB