vue-router 命名视图和嵌套路由混合

说明

1、后台管理的页面结构一般由顶部+菜单栏+内容部分构成，如下图

后台管理结构
2、部分群友就表示在有些页面不想要头部和菜单栏，我是通过添加一个新的路由来实现的
后台管理结构
3、项目github地址
4、项目github运行地址pages

router-index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/pages/home'
import header from '@/components/header'
import menu from '@/components/menu'
import content from '@/components/content'
import list from '@/components/list'
import detail from '@/components/detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home/menu'
    },
    {
      path: '/home',
      name: 'home',
      component: home,
      children: [{
        path: 'menu',
        components: {
          header: header,
          menu: menu,
          content: content
        },
        children: [
          {
            path: 'list/:index',
            name: 'list',
            component: list
          },
          {
            path: 'list/:index/detail/:detailIndex',
            name: 'detail',
            component: detail
          }
        ]
      }]
    },
    {
      path: '/detailNoMenu',
      name: 'detailNoMenu',
      component: detail
    }
  ]
})