vue 프로젝트에서 공공 구성 요소 앱을 인용하지 않으려는 페이지를 해결합니다.질문

Vue 단일 페이지 응용 프로그램은 공공 구성 요소를 앱에 배치합니다.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로 변화 모니터링
보충 지식: 앱에서.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>

끝내다
위의 해결 vue 프로젝트의 어떤 페이지는 공공 구성 요소 앱을 인용하고 싶지 않습니다.vue의 문제는 바로 편집자가 여러분께 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주셨으면 좋겠습니다.