101. router | 뷰 라우터 설치 및 연결

 

2022년 2월 7일부터 뷰 라우터 설치할때 버전을 표기해 주어야 합니다.

npm i vue-router@3.5.3

---

---

index.js

import Vue from 'vue';

// 뷰 라우터 연결
import VueRouter from 'vue-router';

// Vue.use - 플러그인을 실행하기 위해 필요한 코드
// 뷰 라우터가 모든 컴포넌트에 적용되게 플러그인 연결
Vue.use(VueRouter);

// VueRouter를 이용해서 인스턴스 만들고
// 인스턴스를 default로 꺼내면
// VueRouter 인스턴스가 파일에서 밖으로 나가게됨. 이게 export 역할
// default는 하나의 변수나 파일이 나가게 하는것
export default new VueRouter();

---

main.js

import Vue from 'vue';
import App from './App.vue';

// export로 내보낸 router import로 가져오기
import router from '@/routes/index';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  // router 연결 
  router,
}).$mount('#app');