vue3부터는 vue-router가 아닌 vue-router@next를 설치해줘야합니다.
yarn add vue-router@next
src 폴더 내부에 router 폴더를 생성하고 폴더 안에 index.js로 라우터 모듈을 생성해줍니다.
mkdir src/router
touch src/router/index.js
아래와 같이 라우터 모듈을 작성합니다.
📃 src/router/index.js
import { createWebHistory, createRouter } from "vue-router";
import PostList from "./views/Main.vue";
import PostDetail from "./views/PostDetail.vue";
const routes = [
{
path: "/",
name: "Post List",
component: Main,
},
{
path: "/:title",
name: "PostDetail",
component: PostDetail,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
🔎 route 옵션
path : route를 찾을 수 있는 url path
name : route로 연결할 때 사용하는 이름(선택)
component : route에서 불러와질 컴포넌트
📌 참고 vue-router-a-tutorial-for-vue-3
🔎 history mode
HTML5 모드
history: createWebHistory()
권장 history mode
Vue 앱은 Client Side인 SPA앱이기 때문에 url로 다이렉트로 접속하게 되면 404에러가 뜬다. 이런 문제를 해결하기 위해서는 서버측에서 대응이 필요하다. 공식 문서에서 확인할 수 있다.
나는 prerender-spa-plugin을 사용하여 해결하였다.
👉 Webpack prerender-spa-plugin 사용하기 포스팅
url 형태 - https://example.com/user/1
해시 모드
history: createWebHashHistory()
hash 관련 내용은 서버로 보내지지 않기 때문에 서버측 대응이 필요하지 않다.
이런 점은 SEO에 매우 좋지 않다. SEO가 걱정이라면 HTML5모드를 사용해야한다.
url 형태 - https://example.com/#home
📌 참고 Vue Router - Different History modes
라우터를 사용한다고 어플리케이션에게 알려줍니다.
📃 /src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router).mount('#app')
라우터 영역을 지정해줍니다.
📃 /src/App.vue
<template>
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<router-view />
</template>
위 소스에서 동적라우팅을 사용한 부분입니다. 동적으로 적용할 부분은 콜론(:)이 앞에 붙습니다.
{
path: "/:title",
name: "PostDetail",
component: PostDetail,
}
동적 라우팅으로 지정한 :title은 아래와 같이 $route.params.title과 같은 형태로 사용할 수 있습니다.
👍