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