Vue Router #1 라우터 기초

router.js 에서 컴포넌트를 import 시키는 방법

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue' //1.바로 import 시킴

const About =() =>{
return import(/* webpackChunkName: "about" */ './views/About.vue')  //3.
}
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/', // 주소
      name: 'home', 
      component: Home //컴포넌트
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "about" */ './views/About.vue') //2.
    }
  ]
})

 

1번과 2,3번의 차이: 1번은 전체컴포넌트를 라우터가 쥐고 있다가 사용자가 원하는 페이지를 입력/접근 하면 그 페이지를 보여주는 형식이고 2,3번은 사용자가 입력/접근시 해당 컴포넌트만 보여준다. 그래서 속도 차이가 난다.

 

router사용법 

@click 

      <v-list-tile-title @click="$router.push({name:'home'})">Home</v-list-tile-title><!-- 페이지 이동시,객체형태로 이동: router.push(객체형태로 name의 값), 객체형식으로 이동시, query:{}, params{}등의 형식으로 라우터를 통해 전달가능 -->
           <!--  <v-list-tile-title @click="$router.push('/')">Home</v-list-tile-title>path로 이동: router.push('path 의 값') -->

router-link

    <router-link :to="{name:'home'}">클릭1</router-link>