vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法分析
更新時(shí)間：2019年02月11日 09:56:30 作者：Mosowe
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法,結(jié)合實(shí)例形式分析了vue.js針對(duì)導(dǎo)航隱藏與顯示的路由配置、事件監(jiān)聽(tīng)等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法。分享給大家供大家參考，具體如下：
在日常項(xiàng)目中，總有幾個(gè)頁(yè)面是要用到底部導(dǎo)航的，總有那么些個(gè)頁(yè)面，是不需要底部導(dǎo)航的，這里列舉一下頁(yè)面底部導(dǎo)航的顯示與隱藏的兩種方式：
方式一：
1. 路由配置meta: {footShow: true, }，
routes: [
{
path: '/',
name: 'home',
redirect: '/home', // 默認(rèn)路由添加class
component: home,
meta: {
footShow: true, // true顯示，false隱藏
},
},
2. 在App.vue頁(yè)面
<template> <div id="app"> <router-view/> <foot v-if="$route.meta.footShow"></foot> </div> </template>
方式二：
使用watch監(jiān)聽(tīng)導(dǎo)航切換
watch: { // 監(jiān)聽(tīng)路由變化
$route (to, from) {
let ThisPage = to.name;
if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal') {
this.footShow = true;
} else {
this.footShow = false;
}
}
},
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue實(shí)現(xiàn)可以快進(jìn)后退的跑馬燈組件
這篇文章主要為大家詳細(xì)介紹了vue編寫一個(gè)可以快進(jìn)后退的跑馬燈組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vuejs實(shí)現(xiàn)ready函數(shù)加載完之后執(zhí)行某個(gè)函數(shù)的方法
這篇文章主要介紹了vuejs實(shí)現(xiàn)ready函數(shù)加載完之后執(zhí)行某個(gè)函數(shù)的方法,需要的朋友可以參考下2018-08-08
Vue源碼學(xué)習(xí)記錄之手寫vm.$mount方法
在我們開(kāi)發(fā)中，經(jīng)常要用到Vue.extend創(chuàng)建出Vue的子類來(lái)構(gòu)造函數(shù)，通過(guò)new 得到子類的實(shí)例，然后通過(guò)$mount掛載到節(jié)點(diǎn)，今天通過(guò)本文給大家講解手寫vm.$mount方法 ，感興趣的朋友一起看看吧2022-11-11
vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕
這篇文章主要介紹了vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue事件監(jiān)聽(tīng)函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽(tīng)函數(shù)on中的this指針域使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在項(xiàng)目開(kāi)發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況,下面這篇文章主要給大家介紹了關(guān)于vuecli中chainWebpack的常用操作舉例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例
本篇文章主要介紹了分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例。非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03
vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色詳解
這篇文章主要給大家介紹了關(guān)于vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
本文的初衷是想讓更多哎學(xué)習(xí)的人知道并了解vue模版編譯，所以文中主要以階段流程為主，不會(huì)涉及過(guò)多的底層代碼邏輯,需要的朋友可以參考一下2021-09-09