[Vue] 뷰 router 4버전 설치 및 사용 (1)

 
 
 
1. 설치

npm install vue-router@4
yarn add vue-router@4

 
 
 
2. main.js 에 라우터 세팅

import router from './router'

// 원래 여기서 라우터를 설정을 하는데 
// 코드가 기니까 router 파일을 따로 만들어서 import 한다.
createApp(App).use(router).mount('#app') 

 
 
 
 
 
3. router.js 만들기

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/list",
    component: DetailList.vue,
  },

];

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

export default router; 

 
 
 
 
4. 사용하고 싶은 vue 컴포넌트에다 사용

<!-- 보여줄 곳을 router-view 로 표시 -->
<router-view ></router-view>

<!-- 다른 페이지 이동링크 만들 때 사용 -->
<router-link to="/">홈</router-link>
<p></p>
<router-link to="/list">리스트페이지</router-link>