[Vue3+mongoDB+express ch.4] 라우터 설정 (router)

localhost:8080/home으로 접속할 수 있는 라우팅을 설정해보자.

npm i vue-router@next

router 폴더를 만든 후 index.ts를 추가해준다.

//index.ts

import { createRouter, createWebHistory, RouteRecordRaw, } from 'vue-router'
import Home from '@/components/Home.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/home',
    name: "home",
    component: Home
  }, {
    path: "/redir",
    redirect: "/hello"
  }
]

export const router = createRouter({
  history: createWebHistory(),
  routes
})

각각의 경로로 들어갔을 때 어떤 행동을 해줄지를 정해준다. 

위 코드의 경우 /home으로 접속시 router-view에 Home componet를 띄워주며 /redir으로 접속시 /hello 경로로 redirection시킨다. 

 

//main.ts

import { createApp } from 'vue'
import { router } from './router'
import App from '@/App.vue'

export const serverUrl = `http://${location.hostname}:3001/users`;


fetch(`${serverUrl}`)
  .then(res => res.json())
  .then(res => {
    console.log(`${res.users[0].id} 님 환영합니다`, res);
  });

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

index.ts에서 export한 router를 main.ts에서 import 해준다.

기존의 createApp(App).mount('#app') 이렇게 불러던 것을 router를 사용하여 부르려면 use(router)를 붙여주어야한다. 

 

//App.vue

<template>
  <h1>안녕하세요. 최상위 components인 App.vue 입니다.</h1>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Home from "./components/Home.vue";

export default defineComponent({
  name: "App",
});
</script>

이렇게 <router-view>  를 추가해주면 이 부분에 routes에서 지정한 component가 출력된다. 

즉 localhost:8080/home으로 접속하면 <router-view> 부분에 Home component가 띄워진다.

 

기본 페이지

/home

/redir 접속시 /hello로 redirection