基于vue的spa网站，部分页面头部尾部不固定

Question

用vue做spa网站，但某些页面不需要头部和尾部，或者头部略微有差别，比如点击登录，就不需要头部和导航栏。这时该怎么办呢？有个方法是把头部跟尾部做成组件，需要的页面再导入这两个组件，但感觉代码量多了。除此之外还有别的方法么

Answer 1

可以参考楼上的命名视图做，
我给你发一段router的配置，你一看就懂

routes: [

    {

      path: '/login',

      name: 'login',

      meta: {auth: false, title: '登录'},

      component: Login

    },

    {

      path: '/',

      meta: {title: '首页', active: 1},

      component: resolve => require(['../pages/main'], resolve),

      children: [

        erp,

        crm,

        ...

}]

main.vue

<template>

  <el-row class="container">

    <el-col :span="24" class="header">

      <router-view name="top"></router-view>

    </el-col>

    <el-col :span="24" class="main">

      <aside>

        <router-view name="left"></router-view>

      </aside>

      <section class="content-container">

        <transition name="fade">

          <router-view keep-alive></router-view>

        </transition>

      </section>

    </el-col>

  </el-row>

</template>