vue子路由为什么显示不出来？

Question

为什么我在路由http://localhost:8080/#/folder下显示的是Folder组件
然后访问http://localhost:8080/#/folder/file为什么显示的还是Folder组件而不是File组件？
路由页面

import Vue from 'vue'
import Router from 'vue-router'
import Folder from '@/components/Folder'
import File from '@/components/File'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/folder',
      name: 'Folder',
      component: Folder,
      children: [
        { path: 'file', component: File }
      ]
    }
  ]
})

App.vue

<template>
  <div class="app">
    <div class="top">
      <span>目录</span>
    </div>
    <div class="bottom">
      <div class="nt1">
        <span class="name">文件名</span>
        <span class="time">时间</span>
      </div>
      <router-view/>
      <div class="manage">
        <el-checkbox v-model="checkall" @change="all">全选</el-checkbox>
        <el-button size="mini" type="danger">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      checkall: false,
      list: [
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        },
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        },
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        },
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        }
      ]
    }
  },
  methods: {
    change () {
      console.log(1)
    },
    all () {
      if (!this.checkall) {
        this.list.map((res) => {
          res.checked = false
        })
      } else {
        this.list.map((res) => {
          res.checked = true
        })
      }
    }
  }
}
</script>

<style scoped>
.app{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.top{width: 80%;height: 50px;align-items: center;display: flex;}
.bottom{width: 80%;border: 1px solid #ccc;}
.nt1{display: flex;width: 100%;flex-direction: row;border-bottom: 1px solid #ccc}
.nt{display: flex;width: 100%;flex-direction: column;}
.name{flex-grow: 6}
.time{flex-grow: 1}
.nt_top{display: flex;width: 100%;}
.hr{width: 100%;height: 1px;background-color: #ccc}
.manage{display: flex;justify-content: space-between;align-items: center;height: 50px;}
</style>

folder.vue

<template>
  <div>
    <div class="nt" v-for="(item, index) in list" :key=index>
        <div class="nt_top">
          <div><el-checkbox v-model="item.checked" @change="change"></el-checkbox></div>
            <div class="name">
              {{item.name}}
            </div>
            <div  class="time">
              {{item.time}}
            </div>
        </div>
        <div class="hr">
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'APP',
  data () {
    return {
      checkall: false,
      list: [
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        },
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        },
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        },
        {
          name: '201901244411',
          time: 662323212,
          checked: false
        }
      ]
    }
  },
  methods: {
    change () {
      console.log(1)
    },
    all () {
      if (!this.checkall) {
        this.list.map((res) => {
          res.checked = false
        })
      } else {
        this.list.map((res) => {
          res.checked = true
        })
      }
    }
  }
}
</script>

<style scoped>
.top{width: 80%;height: 50px;align-items: center;display: flex;}
.bottom{width: 80%;border: 1px solid #ccc;}
.nt1{display: flex;width: 100%;flex-direction: row;border-bottom: 1px solid #ccc}
.nt{display: flex;width: 100%;flex-direction: column;}
.name{flex-grow: 6}
.time{flex-grow: 1}
.nt_top{display: flex;width: 100%;}
.hr{width: 100%;height: 1px;background-color: #ccc}
.manage{display: flex;justify-content: space-between;align-items: center;height: 50px;}
</style>

file.vue

<template>
  <div>
    <div class="nt" v-for="(item, index) in list" :key=index>
        <div class="nt_top">
          <div><el-checkbox v-model="item.checked" @change="change"></el-checkbox></div>
            <div class="name">
              {{item.name}}
            </div>
            <div  class="time">
              {{item.time}}
            </div>
        </div>
        <div class="hr">
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'APP',
  data () {
    return {
      checkall: false,
      list: [
        {
          name: '11111111',
          time: 662323212,
          checked: false
        },
        {
          name: '3333',
          time: 662323212,
          checked: false
        },
        {
          name: '222222222',
          time: 662323212,
          checked: false
        },
        {
          name: '4444444444',
          time: 662323212,
          checked: false
        }
      ]
    }
  },
  methods: {
    change () {
      console.log(1)
    },
    all () {
      if (!this.checkall) {
        this.list.map((res) => {
          res.checked = false
        })
      } else {
        this.list.map((res) => {
          res.checked = true
        })
      }
    }
  }
}
</script>

<style scoped>
.top{width: 80%;height: 50px;align-items: center;display: flex;}
.bottom{width: 80%;border: 1px solid #ccc;}
.nt1{display: flex;width: 100%;flex-direction: row;border-bottom: 1px solid #ccc}
.nt{display: flex;width: 100%;flex-direction: column;}
.name{flex-grow: 6}
.time{flex-grow: 1}
.nt_top{display: flex;width: 100%;}
.hr{width: 100%;height: 1px;background-color: #ccc}
.manage{display: flex;justify-content: space-between;align-items: center;height: 50px;}
</style>

Answer 1

file是folder的子路由， 所以#/folder/file时， File 组件会渲染在Folder组件的<router-view/>标签位置