子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数组里和其他配置路由基本相同，需要配置path和component，然后在相应部分添加<router-view/>来展现子页面信息，相当于嵌入iframe。具体看下面的示例：

1、src/components/Home.vue（父页面）
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <!-- 添加子路由导航 -->
        <p>导航 ：            <router-link to="/home">首页</router-link> | 
            <router-link to="/home/one">-子页面1</router-link> |            <router-link to="/home/two">-子页面2</router-link>
        </p>
        <!-- 子页面展示部分 -->
        <router-view/>
    </div></template><script>export default {
    name: 'Home',
    data () {
        return {
            msg: 'Home Page!'
        }
    }}</script><style scoped></style>
2、src/components/One.vue（子页面1）
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div></template><script>export default {
    name: 'One',
    data () {
        return {
            msg: 'Hi, I am One Page!'
        }
    }}</script><style scoped></style>
3、src/components/Two.vue（子页面2）
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div></template><script>export default {
    name: 'Two',
    data () {
        return {
            msg: 'Hi, I am Two Page!'
        }
    }}</script><style scoped></style>
4、src/router/index.js（路由配置）
import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import One from '@/components/One' import Two from '@/components/Two'Vue.use(Router)export default new Router({
    routes: [
    {
        path: '/', // 默认页面重定向到主页
        redirect: '/home'
    },
    {
        path: '/home', // 主页路由
        name: 'Home',
        component: Home,
        children:[ // 嵌套子路由
            {
                path:'one', // 子页面1
                component:One            },
            {
                path:'two', // 子页面2
                component:Two            },
        ]
    }
    ]})
5、效果图

PS：各部分代码都很简单，也有注释，在采用vue-cli初始化项目完成之后直接复制到相应目录即可查看效果。