[Vue] vue-router 설치와 기본 라우팅

vue-router

https://v3.router.vuejs.org/kr/

npm 설치

npm install vue-router

router 사용 세팅

src/main.js에
import router from ‘./router.js’
createApp(App).use(라우터만든거).mount(‘#app’)

라우터 설정 코드가 길기때문에 보통 다른파일에 만들고 import 시킨다.

(main.js)

import { createApp } from 'vue'
import './assets/css/style.css'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from './router.js'

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

라우터 사용하기

(router.js)

import { createWebHistory, createRouter } from "vue-router";
// vue-router 라이브러리의 함수들을 import 한다.
// createRouter : 라우터생성을 도와주는 함수

import compHome from './components/Home.vue';
import compList from './components/List.vue';

const routes = [
  {
    path: "/",
    component: compHome ,
  },
  {
    path: "/list",                  // 접속 경로
    component: compList ,           // 보여줄 컴포넌트
  }
];

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

export default router;

(App.vue)

<template>
	<!-- 라우터로 설정한 컴포넌트를 보여줄 자리 -->
	<router-view :dataList="dataList"></router-view>
</tempalte>

라우터를 사용하므로 <compList /> 컴포넌트 관련 코드는 삭제한다.

router-link

a태그와 동일하게 동작한다.

<router-link to="/list">리스트 페이지</router-link>