오늘의 목표 📋

☑️ Vue3 에 router 기능 추가
☑️ 로그인 전/후 자동 라우팅 기능 추가
☑️ 지원하지 않은 url 은 404 페이지 호출

제목이 길어서 귀찮다. 다 생략한다.

Vue3 에 vue-route 추가하기

멋모르고 npm install vue-router 추가했었는데 잘 안되더라.

npm i vue-router@next

vuex4 설치할때와 마찬가지로 @next 가 붙는다.

frontend/src/router.js 파일작성

// Vuex 때 처럼 create* 함수를 제공한다.
import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home'), // 동적 import
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login'),
  },
];

// 이렇게 해도 된다.
// const router = createRouter({
//   history: createWebHistory(),
//   routes,
// });
// export default router;

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

/ 로 접근하면 Home 을 보여주고,
/login 으로 접근하면 로그인 화면을 보여주겠다.

frontend/src/main.js 오픈!

import { createApp } from 'vue'

import { store } from './store';
import { router } from './router'; // 라우터 추가하고 

import App from './App.vue'

// Create Vue Instance
const app = createApp(App);

app.use(store);
app.use(router); // 사용 설정 하기

app.mount('#app');

다음으로 App.vue 에 라우터 뷰를 추가한다.
기존에 사용하던 컴포넌트들을 삭제하고 <router-view /> 를 추가한다.

<template>
  <div>
    <!-- HelloWorld msg="Welcome to Your Vue.js App"/-->
    <router-view />
  </div>
</template>

<script>
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld,
  },
}
</script>

<style>
</style>

대신 / 경로에 매핑되는 views/Home.vue 파일을 만들어서 기존 코드를 옮겨주었다.

frontend/src/views/Home.vue 파일을 만들어서

<template>
  <div>
    <HelloWorld msg="Home"/>
    <!-- 메인 문구에 Home 표시를 해주자 -->
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
};
</script>

다 옮겨주었다면 이번엔 로그인 파일을 만들어주자.
제대로 된 화면은 나중에 만들고.. 일단 라우팅만 할 수 있게 파일만 생성하는 느낌으로.

frontend/src/views/Login.vue

<template>
  <div>
    로그인
  </div>
</template>
<script>
export default {
  name: 'Login',
};
</script>

다 옮겨주었다면 npm run serve 해주자.

여전히 못생긴 홈페이지가 잘 보인다!

이번엔 라우팅. 주소창에 http://localhost:5050/login 을 쳐보자

화면이 잘 바뀌는 것을 확인할 수 있다 😙
끄읏 .