javascript - 基於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

關注中 同遇到這樣的問題