基础：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
<template>
    <div>
        <router-link to="/a">转向A页面</router-link>
        <router-link to="/b">转向B页面</router-link>
    </div>
</template>

//A.vue
<template>
    <div>
        <p>我是A。。。</p>
        <p><router-link to="/">返回</router-link></p>
        <p><router-link to="/a1">转到A1</router-link></p>
        <p><router-link to="/a2">转到A2</router-link></p>
        <router-view></router-view>
        <!-- 挂载 -->
    </div>
</template>

//B.vue
<template>
    <div>
        <p>我是B。。。</p>
        <p><router-link to="/">返回</router-link></p>
    </div>
</template>

//A1.vue
<template>
    <div>
        <p>我是A1</p>
        <p><router-link to="/a">返回上一级</router-link></p>
        <p><router-link to="/">返回首页</router-link></p>
    </div>
</template>

//A2.vue
<template>
    <div>
        <p>我是A2</p>
        <p><router-link to="/a">返回上一级</router-link></p>
        <p><router-link to="/">返回首页</router-link></p>       
    </div>
</template>

例子二：

//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
<template>
    <div>
        <p>我是A。。。</p>
        <p><router-link to="/">返回</router-link></p>
        <p><router-link to="/a1">转到A1</router-link></p>
        <p><router-link to="/a2">转到A2</router-link></p>
        
    </div>
</template>

//first.vue
<template>
    <div>
        <router-link to="/a">转向A页面</router-link>
        <router-link to="/b">转向B页面</router-link>
        <router-view></router-view>
        <!-- 挂载 -->
    </div>
</template>

//B.vue
<template>
    <div>
        <p>我是B。。。</p>
        <p><router-link to="/">返回</router-link></p>
    </div>
</template>

//A1.vue
<template>
    <div>
        <p>我是A1</p>
        <p><router-link to="/a">返回上一级</router-link></p>
        <p><router-link to="/">返回首页</router-link></p>
    </div>
</template>

//A2.vue
<template>
    <div>
        <p>我是A2</p>
        <p><router-link to="/a">返回上一级</router-link></p>
        <p><router-link to="/">返回首页</router-link></p>       
    </div>
</template>