本项目的布局实现----嵌套路由、父级路由、子级路由、路由占位符

前言：本项目采用客户端渲染，Ajax（实现前端页面的局部刷新）+SPA（支持浏览器地址栏的前进和后退操作），SPA最核心的技术是前端路由，前端路由的本质是用户事件与事件处理函数之间的对应关系。通过前端路由，可以提高用户的操作体验，同时也能让网页打开速度更快。

在实际开发中，不推荐大家手动模拟前端路由，如果你要管理路由，都要使用官方提供的vue Router来实现。VueRouter支持嵌套路由。

嵌套路由：父级路由链接显示的是父组件（Layout.vue）模板内容，模板内容中又有子级路由占位符。

本工程均采用嵌套路由的方式实现页面布局。

页面布局包括：侧边栏（Sidebar）、头部（navbar）、主体区域（AppMain）。Layout.vue分为两部分：左侧的sidebar和右侧的导航栏navbar加上主体区域AppMain。

几个概念：父组件路由占位符、子组件路由占位符、父级路由、子级路由

父级路由将父组件Layout渲染到App.vue的父组件路由占位符，子级路由将子组件（如dashboard/index）渲染到AppMain.vue的子组件路由占位符。

App.vue代码如下：以下为父路由组件模板，模板中有父组件路由占位符

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

父级路由组件渲染到App根组件

router/index.js中的代码：以下为嵌套路由配置，父级路由通过children属性配置子级路由

{
    path: '/',  // 父级路由
    component: Layout, // 父组件
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',  // 子级路由
      component: () => import('@/views/dashboard/index')  // 子组件
    }]
  }

在router目录的index.js文件中，通过路由的形式把单文件组件Layout.vue渲染到App根组件中,即父级路由组件渲染到App根组件。另外，子级路由组件渲染到主体区域AppMain组件。由上面的路由可知，组件Layout将会被渲染到App根组件的router-view所在的位置。

路由重定向：即用户在访问'/'的时候，强制用户跳转到'/dashboard',而根据子路由规则，除了显示头部和侧边栏区域外，主体区域将展示dashboard/index.vue，即将dashboard/index.vue渲染到AppMain.vue的router-view的位置。

Layout.vue（父组件）代码如下：以下为子级路由组件模板，模板中的app-main组件中有子级路由占位符

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
    <sidebar class="sidebar-container"/>
    <div class="main-container">
      <navbar/>
      <app-main/>
    </div>
  </div>
</template>

AppMain.vue（子组件）代码如下：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view/>
    </transition>
  </section>
</template>

以上代码表示在主体区域展示子级路由组件，即router-view为子路由占位符

在'/'路由规则中，通过children属性设置子路由规则，children数组表示子路由规则，