Vue developer, the page cannot be refreshed when it is in the sub-route.

routing configuration is as follows:

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
    }
  ]
})
Apr.03,2021

how the template for the APP entry is written.

<template>
<div id="app">
<router-view>
<!--  router-view  router-view children -->
        <router-view></router-view>

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

means that the Group @ / components/groupManagement/group.vue
file you refer to should also have a < router-view > < / router-view > to render the corresponding child routes.


vue nested routing requires a < rouer-view > tag
< rouer-view > tag in the component

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

is required in the corresponding home component

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