[Vue3] Vue-router 설치하기

터미널에 다음과 같은 명령어 입력 ( 두 가지 중 하나만 입력하면 됨 )

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

or

 

src폴더 내부에 router.js 파일을 만듦

 

//router.js

import { createWebHistory, createRouter } from "vue-router";
import ArticleList from "./components/ArticleList"

const routes = [
  {
    path: "/ArticleList",
    component: ArticleList,
  }
];

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

export default router;

 

main.js에서 router.js를 임포트후 createApp 뒤에 use() 추가

// main.js

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

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

 

<router-link to="/path"> </router-link>를 통해 등록한 path로 이동 할 수 있고

보여주고싶은 위치에서 <router-view></router-view> 추가

 

// App.vue

...    
    
    <router-link to="/ArticleList">글목록</router-link>
    
    <router-view></router-view>
    
...