解決vue項(xiàng)目中某一頁(yè)面不想引用公共組件app.vue的問(wèn)題
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)文章
Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?
這篇文章主要討論Vue?data中隨意改一個(gè)屬性,視圖都會(huì)更新嗎?下面來(lái)自面試官的問(wèn)題然后做i出的一個(gè)問(wèn)題總結(jié),具有一定的參考價(jià)值,需要的小伙伴可以參考一下2021-12-12VUE3刷新頁(yè)面報(bào)錯(cuò)問(wèn)題解決:Uncaught?SyntaxError:Unexpected?token?&apo
這篇文章主要介紹了VUE3刷新頁(yè)面報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?‘<‘,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式
這篇文章主要介紹了vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場(chǎng)動(dòng)畫示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場(chǎng)動(dòng)畫示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue中watch與watchEffect的區(qū)別詳細(xì)解讀
這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細(xì)解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器,在寫法和用法上有一定區(qū)別,是同一功能的兩種不同形態(tài),底層都是一樣的,需要的朋友可以參考下2023-11-11vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開收起更多等效果示例
這篇文章主要介紹了vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開收起更多等效果示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02