[vue-news] 라우터 기본 - 라우터 설치 및 라우터 구현

💻 라우터 설치

---

라우터 설치 명령어 : npm i vue-router --save

dependencies에 들어가는 라이브러리는 실제로 웹을 실행시키는데 필요한 비즈니스 로직, 웹의 동작을 담당하는 라이브러리가 들어가야한다. 배포할 때도 포함되야 하는 라이브러리이다.

💻 라우터 사용법

---

1. src/main.js 활용법

import Vue from 'vue';
import App from './App.vue';
// ① import로 VueRouter 추가
import VueRouter from 'vue-router';

Vue.config.productionTip = false;

// ② VueRouter 추가
Vue.use(VueRouter);

// 인스턴트 생성 후 routes 연결
const router = new VueRouter({
  routes: [
    
   ]
})

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

하지만 위와 같이 사용했을 때는 라우터가 많아졌을 때 main.js가 라우터 편향적인 설정 파일이 될 것이다.
main.js는 애플리케이션의 플러그인과 라이브러리, 구조들을 파악할 수 있는 청사진이라고 보면 된다.
구조도가 눈에 딱 보여야 한다.

---

2. 파일 모듈화
/src/routes/index.js 생성

import Vue from 'vue';
// ① import로 VueRouter 추가
import VueRouter from 'vue-router';
// 불러올 컴포넌트 import
import NewsView from '../views/NewsView.vue';
import AskView from '../views/AskView.vue';
import JobsView from '../views/JobsView.vue';

// ② VueRouter 추가
Vue.use(VueRouter);

// 인스턴트 생성 후 routes 연결
// vuerouter라는 정보를 관리하는 객체
// main.js로 보낼 것
export const router = new VueRouter({
  // url 해시값 제거
  mode: 'history',
  routes: [
    {
      // url에 대한 정보, url 주소
      path: '/new',
      // url 주소로 갔을 때 표시될 컴포넌트, 페이지
      component: NewsView,
    },
    {
      path: '/ask',
      component: AskView,
    },
    {
      path: '/jobs',
      component: JobsView,
    },
  ]
});

/src/main.js 코드 변경

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import { router } from './routes/index.js';

Vue.config.productionTip = false

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

App.vue에 rotuer-view 추가해주면 끝!