如何解决父子路由调用同一个路径时候，组件重复显示的问题

const routes = [
  {
    path: '/',
    name:'main',
    component: Main,
    children:[
      {
        path:'/',
        name:'home',
        component:() => import('@/views/Home/Home.vue'),
      }
    ]
  },
  
]

如图所示，左侧为导航栏组件，每个按钮实现跳转路由，右侧为显示区域，但是会重复显示

用redirect，

你写相同路径无非就是想让它刚加载的时候右边区域默认显示home页，那用重定向就好了，home换个路由名称。
重定向就是你访问 "/"路径的时候，它会自动跳转到你设置的重定向的页面"/home"，又因为你“/home”路径是“/”的子路由，所以会显示在“/”绑定的组件中的router-view区域，也就是右侧内容区

 
const routes = [
  {
    path: '/',
    name:'main',
    component: Main,
    redirect:"/home"
    children:[
      {
        path:'/home',
        name:'home',
        component:() => import('@/views/Home/Home.vue'),
      }
    ]
  },
]