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>

------完。

以上這篇解決vue專案中某一頁面不想引用公共元件app.vue的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。