vue开发，在子路由里的时候刷新不到页面

Question

路由配置如下：

import Vue from 'vue'
import Router from 'vue-router'
import Group from '@/components/groupManagement/group.vue'
/*Group*/
import Group_list from '@/components/groupManagement/group/group_list.vue'
import Node_list from '@/components/groupManagement/node/node_list.vue'

import Task from '@/components/taskManagement/task_list.vue'
import Timing from '@/components/taskManagement/timing_list.vue'
import Script from '@/components/scriptManagement/script_list.vue'
import Dispatch from '@/components/dispatchManagement/dispatch_list.vue'

Vue.use(Router)

 export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/Group',
      redirect: '/Group/Group_list'
    },
    {
      path: '/Group',
      component: Group,
      children:[
        {
          path:'Group_list',
          component:Group_list
        },
        {
          path:'Node_list',
          component:Node_list
        }
      ]
    },
    {
      path: '/Task',
      component: Task
    },
    {
      path: '/Script',
      component: Script
    },
    {
      path: '/Dispatch',
      component: Dispatch
    },
    {
      path: '*',
      component: Group
    }
  ]
})

Answer 1

APP入口的模板是怎么写的。

<template>
<div id="app">
<router-view>
<!-- 渲染时 router-view 引用的其他组件下还有 router-view 才是对应的子路由children -->
        <router-view></router-view>

</router-view>
</div>
</template>

也就是说你引用的Group @/components/groupManagement/group.vue
这个文件里应该还有一个<router-view></router-view> 来渲染对应的子路由。

Answer 2

vue 嵌套路由 需要在组件里面有一个 <rouer-view> 标签
<rouer-view> 标签 还算可以

{
  path: '/home',
  component: home,
  children: [{
    path: '', 
    name: 'home',
    components: {left:left-component, middle: middle-component, right: right-component}
}

对应的 home 组件里面 就需要

<router-view name="left"></router-view>
<router-view name="middle"></router-view>
<router-view name="right"></router-view>