[강의노트] Vue Router

1. 라우터 설치

버전 명시해야 함
npm i vue-router@3.5.3 --save

• package.json > dependencies에서 확인 가능
• dependencies에 들어가는 라이브러리들은 앱을 실행시키는데 필요한 비즈니스 로직 또는 앱의 동작을 담당하는 라이브러리들이 포함
• 배포할 때도 포함되어야 하는 라이브러리들

2. 라우터 설정

src > main.js: 기본적으로 애플리케이션의 설정들을 파악할 수 있는 청사진(구조도)으로 두기 위해 router 파일을 따로 생성해서 관리함

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';

Vue.config.productionTip = false;

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

src > router > index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import NewsView from '../views/NewsView.vue';
import AskView from '../views/AskView.vue';
import JobsView from '../views/JobsView.vue';


Vue.use(VueRouter);
// export된 라우터를 main.js에서 import
export const router = new VueRouter({
  routes: [
      {
        // path는 url 주소
        path: '/news',
        // component는 특정 url 주소로 갔을 때 표시될 컴포넌트 
        component: NewsView,
      },
      {
        path: '/ask',
        component: AskView,
      },
      {
        path: '/jobs',
        component: JobsView,
      }
    ]
});