this is a simple and better way to implement using router-view sub-routing. Methods such as using v-if control and inserting the head and footer of the page into each page you need can also be achieved, but it is not very good and is not recommended. The following details are as follows:
put all the pages that you need at the end of the header into a routed child route. For example, if there are two components of AB that represent a page, and page A shows the header and footer of the page and inserts the child route at the same time (components are a.vue and b.vue), the A.vue can be written as follows:

<template>
    <div>
        <header/>
        <router-view></router-view>
        <footer/>
    </div>
</template>

routing can be configured as:

[
    {
        path: '/pageA',
        component: () => import('@/components/A.vue'),
        children: [
            {
                path: '/',
                redirect: '/pageA/a'
            },
            {
                path: '/a',
                component: () => import('@/components/a.vue')
            },
            {
                path: '/b',
                component: () => import('@/components/b.vue')
            }
        ]
    },
    {
        path: '/pageB',
        component: () => import('@/components/B.vue')
    }
]

so that all child routing pages under page A will have a head and tail, and only one head and tail will be created.

landlord, just judge the load according to your route .
simple idea, define an array, here is the route that needs to introduce header and tail components path . Then in the App.vue file, make a match when listens for route changes .

learn about the following child routes

use the vuex control component to post a link https://blog.csdn.net/zgh0711.