您好,登錄后才能下訂單哦!
這篇文章主要介紹vue如何實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫,Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
具體如下:
在日常項(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; } } },
以上是“vue如何實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。