vue子路由跳转问题

问题大概是这样的，我这边简单的做了一个demo

import Vue from 'vue'
import ElementUI from 'element-ui'
// import '../stastic/element-ui2.4.9-index.css'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(ElementUI);

import App from './App.vue'
import Welcome from './pages/welcome.vue'
import ElementLaout from './pages/element-layoutui.vue'
import Select1 from './pages/select-1.vue'
import Select2 from './pages/select-2.vue'
import Home from './pages/home.vue'

const router = new VueRouter({
  /*
    routes: [
      {path: '/',component: Welcome},
      {path: '/home',component: Home},
      {path: '/element',component: ElementLaout},
      {path: '/select1',component: Select1},
      {path: '/select2',component: Select2},
    ]
  */
  // mode:'history',
  routes: [

    {
      path: '/list',
      component: Welcome,
      children: [
        {
          path: 'home',
          name: 'home',
          component: Home,
        },
        {
          path: 'element',
          name: 'element',
          component: ElementLaout,
        },
        {
          path: 'select1',
          name: 'select1',
          component: Select1,
        },
        {
          path: 'select2',
          name: 'select2',
          component: Select2,
        },
      ]
    },
  ]
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

我用children写子路由来实现路由的跳转，但是在实际环境当中并没有任何数据返回

welcome.vue相关代码

<template>

  <div>
    welcome
    <router-link to="/list/home">go home</router-link>
    <router-link to="/list/element">go element-layoutui</router-link>
    <!--<router-view></router-view>-->
    <!--<router-view name = "home">go home</router-view>-->
    <!--<router-view name = "element">go element-layoutui</router-view>-->
  </div>
</template>

<script>
  export default {
    name: 'welcome',
  /*  data(){
      return
    }*/
  }
</script>

在网上查阅了相关资料，默认在父组件当中渲染子组件，父组件要有router-view路由视图，否则是不会进行渲染页面的，仅供大家参考