Vue 라우팅 구현 원리

프런트엔드 라우트는 주소와 일치하는 구성 요소나 객체를 직접 찾아 렌더링합니다.
브라우저 주소URL를 변경하여 페이지를 다시 요청하지 않고 페이지 보기를 업데이트합니다.
 
다음과 같은 두 가지 방법이 있습니다.
1. 하나는 #hash이고 주소에 #을 넣어 브라우저를 속인다. 주소의 변화는 페이지 내비게이션을 하고 있기 때문이다.하나는 h5의history로 URL의Hash를 사용하여 완전한 URL을 모의합니다
 
패키지 구축 응용 프로그램을 만들 때 자바스크립트 패키지는 매우 커져서 페이지의 불러오는 데 영향을 줍니다.만약 우리가 서로 다른 루트에 대응하는 구성 요소를 서로 다른 코드 블록으로 나누어 루트가 접근할 때 대응하는 구성 요소를 불러올 수 있다면 더욱 효율적일 것이다.
 
Vue를 이용하다.js에서 제공하는 플러그인 메커니즘입니다.VueRouter를 설치하기 위해 use(plugin)vue-router는 Vue.js 프레임워크의 루트 플러그인으로 mode이라는 매개 변수를 통해 루트의 실현 모델을 제어한다.

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})