這次帶給大家vue.js底部導覽欄的子路由不顯示怎麼處理,處理vue.js底部導覽列路由不顯示的注意事項有哪些,以下就是實戰案例,一起來看一下。
最近利用vue第三方UI MuseUI開發webapp,然後在導航欄這裡出現了問題,我需要在導航欄上的幾個路由上顯示底部導航欄,在其他路由上不顯示,就這個問題,MuseUI的底部導覽列直接載入在app.vue裡面,會每個頁面都有導覽欄,所以這種方式不可行,後來我真的使出了渾身解數,去MuseUI作者GitHub上面提問,無果,去segmentfault上面提問,無果,去vue官方群提問,無果,在提問之前,我都是經過一番搜尋,思考的,但是這些都讓我崩潰了。可能出錯的地方從路由URL,museUI的使用BUG,到加入鉤子函數,都預想過,都不是,沒關係,堅持就是勝利,可能是我的努力感動了上蒼,找到了解決方案。
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">
這是我找到的解決方案,之後根據這個修改了自己的程式碼,成功解決了。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是vue.js底部導覽列的子路由不顯示怎麼處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!