기본: vue-router 하위 루트 구현

//      index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/first'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'
import A2 from '@/components/A2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },{
      path: '/a',
      component: A,
      children:[{    //   ，       ，      。
        path: '/a1',
        component: A1
      },{
        path: '/a2',
        component: A2
      }]
    },{
      path: '/b',
      component: B
    }    
  ]
})

//   first.vue

//A.vue

//B.vue

//A1.vue

//A2.vue

//index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/first'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'
import A2 from '@/components/A2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First,
      children:[
        {
          path: '/a',
          component: A,
        },{
          path: '/b',
          component: B
        },{
          path:'/a1',
          component:A1
        },{
          path:'/a2',
          component:A2
        }
      ]
    } 
  ]
})

//A.vue

//first.vue

//B.vue

//A1.vue

//A2.vue