Solution to avoid referencing public components in app.vue within a single vue page

Vue single-page application puts public components in app.vue, but what should I do if I want a certain page to not have these public components (such as a login page)? Each page has a navigation bar, but I want the login page to have only one background color and no login box. How should the navigation bar be set up?

vue Chinese documentation: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1 %E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

In the root component: Use v-show in the navigation bar to determine whether the current route is an unnecessary component to complete the page:

<template>
    <div id="app">
        <home-header v-show="!(path ==='/') "></home-header>
        <home-aside v-show="!(path ==='/')"></home-aside>
        <router-view/>
    </div>
</template>
 
<script>
    import HomeHeader from './components/header/Header'
    import HomeAside from './components/aside/Aside'
    export default {
        name: 'App',
        data(){
            return{
                path:''
            }
        },
        components: {
            HomeHeader,
            HomeAside,
        },
        // 判断路由
        mounted() {
          this.path = this.$route.path;
          // console.log(this.$route.path)
        },
        watch:{
            $route(to,from){
                this.path = to.path
            }
        }
    }
</script>
<style>
</style>

Use this.path = the route of the current page in mounted(){} and then use watch to monitor changes
————————————
Copyright statement: This article is written by CSDN blogger “Let me see The original article "Who is Learning" follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement when reprinting.
Original link: https://blog.csdn.net/weixin_42545184/article/details/89311666