-
[Vue3+mongoDB+express ch.4] 라우터 설정 (router)Vue 2020. 12. 31. 17:35
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
'Vue' 카테고리의 다른 글
express async request handler 오류 (0) 2021.01.26 [Vue]record 문법 사용법 (0) 2021.01.06 [Vue3+mongoDB+express ch.3] Frontend Backend 연결 (0) 2020.12.31 vue3 express mongoDB 개발환경 세팅 (0) 2020.12.29 typescript를 사용한 Vue3 프로젝트 환경 만들기 (0) 2020.12.24