vue-router 사용하기. 페이지 이동

먼저 페이지 이동이 일어날 컴포넌트 라우터를 작성한다.

// index.js

import { createRouter, createWebHistory } from "vue-router";
import MainPage from "../pages/MainPage.vue"
import DiscordHome from "../components/discord/DiscordHome.vue"
import DiscordLogin from "../components/discord/DiscordLogin.vue";
import DiscordServer from "../components/discord/DiscordServer.vue";
import UpcomingHome from "../components/discover/upcoming/Upcoming.vue"
import TopbannerHome from "../components/discover/topbanner/Topbanner.vue"

export default createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            component: MainPage
        },
        {
            path: "/discord",
            component: DiscordHome
        },
        {
            path: "/discord/login",
            component: DiscordLogin
        },
        {
            path: "/discord/server",
            component: DiscordServer
        },
        {
            path: "/discover/upcoming",
            component: UpcomingHome
        },
        {
            path: "/discover/topbanner",
            component: TopbannerHome
        },
    ],
});

 

작성한 라우터를 메인에 명시한다.

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from "./store/store";
import router from "./router/index"

createApp(App)
    .use(store)
    .use(router)
    .mount('#app')

 

보여줄 컴포넌트들을 App.vue에 작성한다.

<router-view /> 컴포넌트를 활용.

// App.vue

<template>
<div>
  <button class="home" >
    <router-link to="/">Home</router-link>
  </button><br/>

  <router-view />
</div>
</template>

<script>
  export default {
    name: "app",
    components: {},
    props: {},
    data(){
      return {

      };
    },
    setup(){

      return {

      };
    }
  }
</script>

<style>
  .home{
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

 

루트페이지 컴포넌트를 작성한다.

// MainPage.vue

<template>
<div>
  <div class="PostBtn">
    <!-- <button @click="goDiscord()" >
      <router-link to="/discord/login">Discord</router-link>
    </button><br/>
    <button @click="goDiscord()" >
      <router-link to="/discord/server">Discord</router-link>
    </button><br/> -->

    <button @click="goDiscord()" >
      <router-link to="/discover/upcoming">Upcoming POST</router-link>
    </button>
    <button @click="goDiscord()" >
      <router-link to="/discover/topbanner">Topbanner POST</router-link>
    </button>
  </div>
  <router-view />
</div>
</template>

<script>
  export default {
    name: "MainPage",
    components: {},
    props: {},
    // data(){
    //   return {

    //   },
    // },
    setup(){
      const goDiscord = () => {

      }
      return {
        goDiscord,
      };
    }
  }
</script>

<style>
  .PostBtn{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .PostBtn > button {
    margin-top: 10px;
  }
</style>

 

css를 입히기 귀찮아서 버튼으로 표현했는데, 엄밀히 말하면 태그를 통해 싱글 페이지 컴포넌트간 이동이 가능해진다.

 

컴포넌트를 삽입하기 위한 최상위 페이지를 구현하고 컴포넌트를 주입한다.

// Topbanner.vue

<template>
<div>
    <h1>Post Topbanner</h1>
    <TopbannerPost />
</div>
</template>

<script>
import TopbannerPost from "./TopbannerPost.vue";
export default {
    name:"TopbannerHome",
    components: {TopbannerPost},
    data(){
        return {

        };
    },

    setup(){

        return {

        };
    },
}
</script>

<style>

</style>

 

 

폼데이터 형식 컴포넌트를 작성한다.

<template>
<div>
    <form class="upcomingForm" @submit.prevent="onSubmit()">
        <input placeholder="TITLE" type="text" v-model="title" required />
        <input placeholder="DESCRIPTION" type="text" v-model="description" required />
        <input placeholder="CONTRACT_ADDRESS" type="text" v-model="contractAddress" required />
        <input placeholder="IMAGE_URL" type="url" v-model="imageUrl"  />
        <input placeholder="VIDEO_URL" type="url" v-model="videoUrl"  />
        <select v-model="priority">
            <option disabled value="0">출력 순서</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <input type="submit" value="Submit" />
        <!-- <button type="submit">Sumbit</button> -->
    </form>
</div>
</template>

<script>
import axios from "axios";
// import { ref } from "vue";

export default {
    name: "TopbannerPost",
    components: {},
    props:{},
    data(){
        return {            
            title: "",
            description: "",
            contractAddress: "",
            imageUrl: "",
            videoUrl: "",
            priority: null
        };
    },

    setup(){

        return {

        };
    },

    methods: {
        async onSubmit(){

            const body = {
                TITLE: this.title,
                DESCRIPTION: this.description,
                CONTRACT_ADDRESS: this.contractAddress,
                IMAGE_URL: this.imageUrl,
                VIDEO_URL: this.videoUrl,
                PRIORITY: this.priority ? Number(this.priority) : null,
            };

            const result = await axios.post(`http://localhost:3000/discover/topbanner`, body);
            console.log(result)
            if(result.data.success){
                this.title = "",
                this.description = "",
                this.contractAddress = ""
                this.imageUrl = "",
                this.videoUrl = "",
                this.priority = null
            } else{
                return ;
            }
        },
    },
}
</script>

<style>
    .upcomingForm{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .upcomingForm > input, select, label{
        margin-top: 5px;
        padding: 5px 10px;
        width: 500px;
    }
</style>

 

결과페이지 짜잔~