亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

解決vue項(xiàng)目中某一頁(yè)面不想引用公共組件app.vue的問(wèn)題

 更新時(shí)間:2020年08月14日 09:03:09   作者:讓我看看誰(shuí)在學(xué)習(xí)  
這篇文章主要介紹了解決vue項(xiàng)目中某一頁(yè)面不想引用公共組件app.vue的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

Vue 單頁(yè)面應(yīng)用 把公共組件放在 app.vue 但是我希望某個(gè)頁(yè)面沒(méi)有這些公共組件怎么辦(比如登陸頁(yè)面)每個(gè)頁(yè)面都有 導(dǎo)航欄 但是我希望 登陸頁(yè)面只有一個(gè)背景色和一個(gè)登陸框 沒(méi)有導(dǎo)航欄 那應(yīng)該怎樣設(shè)置呢?

vue中文文檔:點(diǎn)擊進(jìn)入

在根組件中:在導(dǎo)航欄使用v-show判斷當(dāng)前路由是否是不需要的組件來(lái)完成頁(yè)面:

<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=當(dāng)前頁(yè)面的路由然后使用watch監(jiān)測(cè)變化

補(bǔ)充知識(shí):在app.vue里面注冊(cè)的組件,然后想在首頁(yè)不顯示,需要怎樣控制呢?vue切換路由的時(shí)候,在哪兒監(jiān)控路由變化呢?

需求是這樣的:

除了首頁(yè)之外,每個(gè)頁(yè)面上都要顯示一個(gè)【返回的導(dǎo)航欄】。

那么問(wèn)題來(lái)了,怎樣控制首頁(yè)返回導(dǎo)航欄的顯示與隱藏呢。

思路:

在【返回的導(dǎo)航欄】組件里面,監(jiān)聽路由的變化,然后在監(jiān)聽里面進(jìn)行判斷即可。

代碼:

<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('點(diǎn)擊了返回')
    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項(xiàng)目中某一頁(yè)面不想引用公共組件app.vue的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論