您好,登錄后才能下訂單哦!
這篇文章主要介紹vue項目中某一頁面不想引用公共組件app.vue怎么辦,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
Vue 單頁面應(yīng)用 把公共組件放在 app.vue 但是我希望某個頁面沒有這些公共組件怎么辦(比如登陸頁面)每個頁面都有 導(dǎo)航欄 但是我希望 登陸頁面只有一個背景色和一個登陸框 沒有導(dǎo)航欄 那應(yīng)該怎樣設(shè)置呢
vue中文文檔:點擊進(jìn)入
在根組件中:在導(dǎo)航欄使用v-show判斷當(dāng)前路由是否是不需要的組件來完成頁面:
<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)前頁面的路由然后使用watch監(jiān)測變化
補充知識:在app.vue里面注冊的組件,然后想在首頁不顯示,需要怎樣控制呢?vue切換路由的時候,在哪兒監(jiān)控路由變化呢?
需求是這樣的:
除了首頁之外,每個頁面上都要顯示一個【返回的導(dǎo)航欄】。
那么問題來了,怎樣控制首頁返回導(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('點擊了返回') 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怎么辦的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。