Javascript – Vue-basierte Spa-Website, der Kopf und das Ende einiger Seiten sind nicht festgelegt

Question

Verwenden Sie Vue, um eine Spa-Website zu erstellen, aber einige Seiten erfordern keine Kopf- und Endzeilen oder die Kopfzeilen unterscheiden sich geringfügig. Wenn Sie beispielsweise zum Anmelden klicken, benötigen Sie keine Kopf- und Navigationsleiste. Was ist zu diesem Zeitpunkt zu tun? Eine Methode besteht darin, die Kopf- und Schwanzkomponenten in Komponenten umzuwandeln und diese beiden Komponenten dann in die erforderlichen Seiten zu importieren. Es scheint jedoch, dass die Codemenge zu groß ist. Gibt es außer dieser noch eine andere Möglichkeit?

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

关注中 同遇到这样的问题