溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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>以上是vue項目中某一頁面不想引用公共組件app.vue怎么辦的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
