基于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>

Answer 2

都写进去，需要的时候展示，不需要就隐藏？
但是你自己的那个方法 不是挺好的吗?头尾公用，根据路由判断载入呗

Answer 3

是不是可以加判断条件，根据条件是否显示头部尾部？v-if else

Answer 4

写多级路由。

Answer 5

可以考虑vue-route的命名视图，具体需要根据业务来看

Answer 6

关注中 同遇到这样的问题