开发常见路由设计

（1）父路由到子路由

首先要将父页面内添加route-view作为可动态切换的容器，children里面的第一个子路由path留空，第一个子路径会默认继承父path即主页面path，此时共用一个path。而且页面默认会展示第一个子路由的页面，所以实际效果是“/Publish”和“/Publish/Detail”在来回切换，相当于/Detail是/Publish的子路由子页面

点击查看代码

{
   path: '/Publish',
   name: 'Publish',
   id: 'H030703',
   component: () => import('@/views/Special/Debt/Main/index.vue'),
   meta: {
     title: '发行',
     auth: true,
   },
   children: [
   {
   	 // 第一个子路由的path留空
     path: '', // 继承父路由默认是：/Publish
     name: 'Main',
     id: 'H03070301',
     component: () => import('@/views/Special/Debt/Main/Publish/index.vue'),
     meta: {
       title: '发行',
       auth: true,
     },
   },
   {
     path: '/Publish/Detail',
     name: 'Detail',
     id: 'H03070302',
     component: () => import('@/views/Special/Debt/Main/Detail/index.vue'),
     meta: {
       title: '详情',
       auth: true,
     },
    },
   ],
},

注意：

Main页面只有一个用来展示的容器,作为父路由
Publish页面是子路由a，Detail是子路由b；
路径变化则是/Publish和/Publish/Detail切换，/Publish指向的页面则是a，/Publish/Detail指向的则是b

（2）layOut路由布局、子路由的path内均要代入父路由

点击查看代码

{
   path: '/Publish',
   name: 'Publish',
   id: 'H030703',
   component: () => import('@/views/Special/Debt/Main/index.vue'),
   meta: {
     title: '发行',
     auth: true,
   },
   children: [
   {
   	 // 第一个子路由的path留空
     path: '/Publish/Main', // 继承父路由默认是：/Publish
     name: 'Main',
     id: 'H03070301',
     component: () => import('@/views/Special/Debt/Main/Publish/index.vue'),
     meta: {
       title: '发行',
       auth: true,
     },
   },
   {
     path: '/Publish/Detail',
     name: 'Detail',
     id: 'H03070302',
     component: () => import('@/views/Special/Debt/Main/Detail/index.vue'),
     meta: {
       title: '详情',
       auth: true,
     },
    },
   ],
},

注意：

Main页面可以有其他内容，比如像header组件等等，部分用来展示子路由页面的容器
Publish页面是子路由a，Detail是子路由b；
路径变化则是/Publish/Main和/Publish/Detail切换，/Publish/Main指向的页面则是a，/Publish/Detail指向的则是b