首頁 > web前端 > js教程 > vue.js底部導覽列的子路由不顯示怎麼處理

vue.js底部導覽列的子路由不顯示怎麼處理

php中世界最好的语言
發布: 2018-04-11 14:57:17
原創
2320 人瀏覽過

這次帶給大家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中文網其它相關文章!

推薦閱讀:

JS怎麼擴充字串拼接

#Nginx的設定檔怎麼分段下載

#

以上是vue.js底部導覽列的子路由不顯示怎麼處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板