javascript - Vue-based spa website, the head and tail of some pages are not fixed

Question

Use vue to make a spa website, but some pages do not require headers and tails, or the headers are slightly different. For example, if you click to log in, you do not need a header and navigation bar. What to do at this time? One method is to make the head and tail components into components, and then import these two components into the required pages, but it feels like the amount of code is too much. Is there any other way besides this?

Answer 1

You can refer to the named view upstairs.
I will send you a router configuration, you will understand it at a glance

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

Write everything in, show it when needed, hide it when not needed?
But isn’t your own method pretty good? The beginning and end are common, and you can load them based on the routing

Answer 3

Is it possible to add a judgment condition and whether to display the head and tail according to the condition? v-if else

Answer 4

Write multi-level routing.

Answer 5

You can consider the named view of vue-route. The specific needs will depend on the business

Answer 6

Follow me if you encounter this problem