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)聽等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法。分享給大家供大家參考，具體如下：
在日常項(xiàng)目中，總有幾個(gè)頁面是要用到底部導(dǎo)航的，總有那么些個(gè)頁面，是不需要底部導(dǎo)航的，這里列舉一下頁面底部導(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頁面
<template> <div id="app"> <router-view/> <foot v-if="$route.meta.footShow"></foot> </div> </template>
方式二：
使用watch監(jiān)聽導(dǎo)航切換
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;
}
}
},
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了Vue項(xiàng)目識(shí)別不到@別名問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用webpack搭建vue項(xiàng)目及注意事項(xiàng)
這篇文章主要介紹了使用webpack搭建vue項(xiàng)目的方法，本文以開發(fā)環(huán)境為例，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
解決vue單頁面多個(gè)組件嵌套監(jiān)聽瀏覽器窗口變化問題
這篇文章主要介紹了解決vue單頁面多個(gè)組件嵌套監(jiān)聽瀏覽器窗口變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue如何使用笛卡爾積算法構(gòu)建sku表格問題，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染
在Vue中,el-table是element-ui提供的強(qiáng)大表格組件,可以用于展示靜態(tài)和動(dòng)態(tài)表格數(shù)據(jù),本文主要介紹了element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染,感興趣的可以了解一下2024-03-03
解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問題
今天小編就為大家分享一篇解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Vue使用Three.js加載glTF模型的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vant中field組件label屬性兩端對(duì)齊問題及解決
這篇文章主要介紹了vant中field組件label屬性兩端對(duì)齊問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue實(shí)現(xiàn)百度語音合成的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于vue實(shí)現(xiàn)百度語音合成的實(shí)例內(nèi)容，以及相關(guān)代碼，需要的朋友們參考下。2019-10-10