解決vue項(xiàng)目中某一頁面不想引用公共組件app.vue的問題
Vue 單頁面應(yīng)用 把公共組件放在 app.vue 但是我希望某個(gè)頁面沒有這些公共組件怎么辦(比如登陸頁面)每個(gè)頁面都有 導(dǎo)航欄 但是我希望 登陸頁面只有一個(gè)背景色和一個(gè)登陸框 沒有導(dǎo)航欄 那應(yīng)該怎樣設(shè)置呢?
vue中文文檔:點(diǎn)擊進(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)測(cè)變化
補(bǔ)充知識(shí):在app.vue里面注冊(cè)的組件,然后想在首頁不顯示,需要怎樣控制呢?vue切換路由的時(shí)候,在哪兒監(jiān)控路由變化呢?
需求是這樣的:
除了首頁之外,每個(gè)頁面上都要顯示一個(gè)【返回的導(dǎo)航欄】。
那么問題來了,怎樣控制首頁返回導(dǎo)航欄的顯示與隱藏呢。
思路:
在【返回的導(dǎo)航欄】組件里面,監(jiān)聽路由的變化,然后在監(jiān)聽里面進(jìn)行判斷即可。
代碼:
<template> <div v-if='isShowBack'> <div @click='toBack()'> <span class='left_arrow'> <img src='http://www.leifengta.com.cn/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)目中某一頁面不想引用公共組件app.vue的問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁效果(實(shí)例代碼)2. 詳解Android studio 動(dòng)態(tài)fragment的用法3. 解決Android studio xml界面無法預(yù)覽問題4. 圖文詳解vue中proto文件的函數(shù)調(diào)用5. php模擬實(shí)現(xiàn)斗地主發(fā)牌6. 什么是python的自省7. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)8. vue 使用localstorage實(shí)現(xiàn)面包屑的操作9. Vuex localStorage的具體使用10. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟

網(wǎng)公網(wǎng)安備