Vue Router

vue router 설치

npm install vue-router

router.js

<script src="/path/to/vue-router.js"></script>
<script>
import VueRouter from 'vue-router'
Vue.use(VueRouter)

export default new Router({
  // hash mode : 필요한 리소스만 호출. url에 #이 들어감
  // history mode : 페이지 이동할때마다 html,css,js 호출
  // mode: history,
  base: process.env.BASE_URL,
  routes: [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
  	path: '/*', // 설정한 rounte외 호출 시 
    redirect: {'/home'},
  },
  {
    path: '/test',
    name: 'test',
    beforLeave: (to, from, next) => { // 페이지 떠나기전
    }
    beforeEnter: (to, from, next) => { // 페이지 이동 전
     if(isSome()){
       next('/home')
     } else {
      next();
     }
    }
    // 비동기 호출을 그룹핑화 하여 사용할때는 
    // /* webpackChunkName: "group-foo" */ 를 사용
    // const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    // const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    // const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
    component: () => import(Test), // 호출될때 import
    children: [{
      path: ":test-detail",
      name: "test-detail",
      component: () => import(Test-detail),
    }]
  },
  ]
})
</script>

App.vue

<router-view/>

// 페이지 호출 방법
<v-btn @click="$rounter.push({name:'home', params:{}})">버튼</v-btn>

<router-link :to="{name: 'home'}, params:{}">버튼</router-link>
<v-btn router :to="{name: 'home', params:{}}" exact>버튼</v-btn>