vue.js 底部導(dǎo)航欄 一級路由顯示 子路由不顯示的解決方法
更新時(shí)間：2018年03月09日 10:43:28 作者：LeachZhou
下面小編就為大家分享一篇vue.js 底部導(dǎo)航欄 一級路由顯示 子路由不顯示的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近利用vue第三方UI MuseUI開發(fā)webapp，然后在導(dǎo)航欄這里出現(xiàn)了問題，我需要在導(dǎo)航欄上的幾個(gè)路由上顯示底部導(dǎo)航欄，在其他路由上不顯示，就這個(gè)問題，MuseUI的底部導(dǎo)航欄直接加載在app.vue里面，會(huì)每個(gè)頁面都有導(dǎo)航欄，所以這種方式不可行，后來我真的使出了渾身解數(shù)，去MuseUI作者GitHub上面提問，無果，去segmentfault上面提問，無果，去vue官方群提問，無果，在提問之前，我都是經(jīng)過一番搜索，思考的，但是這些都讓我崩潰了。可能出錯(cuò)的地方從路由URL，museUI的使用BUG，到加入鉤子函數(shù)，都預(yù)想過，都不是，沒關(guān)系，堅(jiān)持就是勝利，可能是我的努力感動(dòng)了上蒼，找到了解決方案。
router.js
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/first', component: firstView, meta: { navShow: true, cname: '一級頁面' }, name: 'first' },
{ path: '/sub', component: subView, meta: { navShow: false, cname: '子頁面' }, name: 'sub' },
],
});
app.vue
<Bar v-show="$route.meta.navShow">
這是我找到的解決方案，之后根據(jù)這個(gè)修改了自己的代碼，成功解決了。
以上這篇vue.js 底部導(dǎo)航欄 一級路由顯示 子路由不顯示的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element+electron仿微信實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+element+electron仿微信實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
如何處理vue router 路由傳參刷新頁面參數(shù)丟失
這篇文章主要介紹了如何處理vue router 路由傳參刷新頁面參數(shù)丟失，對vue感興趣的同學(xué)，可以參考下2021-05-05
Animate.css這個(gè)動(dòng)畫庫,很多的動(dòng)畫在這個(gè)庫里面都定義好了,我們用的時(shí)候可以直接使用里面的類名就可以,下面我們就來看看如何在vue項(xiàng)目中使用Animate.css吧2023-08-08
本篇文章主要介紹了vue webuploader 文件上傳組件開發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了vue封裝form表單組件拒絕重復(fù)寫form表單的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
卸載vue2.0并升級vue_cli3.0的實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于卸載vue2.0并升級vue_cli3.0的實(shí)例內(nèi)容，需要的朋友們可以學(xué)習(xí)參考下。2020-02-02
在實(shí)際開發(fā)中,Vue組件之間的數(shù)據(jù)傳遞是最常見的需求,由于組件的作用域相互獨(dú)立,如何在父子、兄弟和跨級組件間傳遞數(shù)據(jù)就顯得尤為重要,本文將詳細(xì)介紹多種Vue組件間傳遞數(shù)據(jù)的方,需要的朋友可以參考下2025-03-03
vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程
這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue element el-form 多級嵌套驗(yàn)證的實(shí)現(xiàn)示例
本文主要介紹了vue element el-form 多級嵌套驗(yàn)證的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue.js系列中的vue-fontawesome使用,需要的朋友可以參考下2018-02-02