解决vue项目中某一页面不想引用公共组件app.vue的问题

Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢?

vue中文文档：点击进入

在根组件中：在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面：

<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>

在mounted(){}中使用this.path=当前页面的路由然后使用watch监测变化

补充知识：在app.vue里面注册的组件，然后想在首页不显示，需要怎样控制呢？vue切换路由的时候，在哪儿监控路由变化呢？

需求是这样的：

除了首页之外，每个页面上都要显示一个【返回的导航栏】。

那么问题来了，怎样控制首页返回导航栏的显示与隐藏呢。

思路：

在【返回的导航栏】组件里面，监听路由的变化，然后在监听里面进行判断即可。

代码：

<template>
<div id="back" v-if="isShowBack">
 <div class="back_box" @click="toBack()">
  <span class="left_arrow">
   <img src="../../../static/images/icon_arrow_bottom_left.png" />
  </span>
 </div>
</div>
</template>

<script>
var that;
export default {
 data() {
  return {
   msg: '',
   isShowBack:false
  }
 },
 methods: {
  toBack() {
   console.log('点击了返回')
   this.$router.go(-1);
  }
 },
 watch:{
  '$route':function(){
   that = this;
   console.log('watch里面',that.$route.name);
   if(that.$route.name == 'HomeNew'){
    that.isShowBack = false;
   }else{
    that.isShowBack = true;
   }
  }
 }
}
</script>

<style scoped="scoped">
.back_box {
 width: 100％;
 height: 30px;
 background: #f1f1f1;
}

.left_arrow {
 width: 22px;
 display: inline-block;
 transform: rotate(90deg);
 margin-top: 4px;
 margin-left: 4px;
}

.left_arrow img {
 width: 100％;
}
</style>

------完。

来源：https://blog.csdn.net/weixin_42545184/article/details/89311666