vue.js 底部導(dǎo)航欄 一級路由顯示 子路由不顯示的解決方法
最近利用vue第三方UI MuseUI開發(fā)webapp,然后在導(dǎo)航欄這里出現(xiàn)了問題,我需要在導(dǎo)航欄上的幾個(gè)路由上顯示底部導(dǎo)航欄,在其他路由上不顯示,就這個(gè)問題,MuseUI的底部導(dǎo)航欄直接加載在app.vue里面,會每個(gè)頁面都有導(dǎo)航欄,所以這種方式不可行,后來我真的使出了渾身解數(shù),去MuseUI作者GitHub上面提問,無果,去segmentfault上面提問,無果,去vue官方群提問,無果,在提問之前,我都是經(jīng)過一番搜索,思考的,但是這些都讓我崩潰了。可能出錯(cuò)的地方從路由URL,museUI的使用BUG,到加入鉤子函數(shù),都預(yù)想過,都不是,沒關(guān)系,堅(jiān)持就是勝利,可能是我的努力感動了上蒼,找到了解決方案。
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)文章
Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04element plus tree拖動節(jié)點(diǎn)交換位置和改變層級問題(解決方案)
圖層list里有各種組件,用element plus的tree來渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進(jìn)來,這篇文章主要介紹了element plus tree拖動節(jié)點(diǎn)交換位置和改變層級問題(解決方案),需要的朋友可以參考下2024-04-04解決Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題
這篇文章主要介紹了Vue.js應(yīng)用回退或刷新界面時(shí)提示用戶保存修改問題,本文通過兩種手段防止運(yùn)營編輯時(shí)丟失數(shù)據(jù),具體內(nèi)容詳情,感興趣的朋友跟隨小編一起看看吧2019-11-11Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue+vuex+axios+echarts畫一個(gè)動態(tài)更新的中國地圖的方法
本篇文章主要介紹了vue+vuex+axios+echarts畫一個(gè)動態(tài)更新的中國地圖的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12詳解vue-cli4 配置不同開發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-06-06解決vue router使用 history 模式刷新后404問題
這篇文章主要介紹了解決vue router使用 history 模式刷新后404問題,需要的朋友可以參考下2017-07-07Vue使用el-tree 懶加載進(jìn)行增刪改查功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue使用el-tree 懶加載進(jìn)行增刪改查,以懶加載的形式展示,目錄根據(jù)需求需要有新增 編輯 刪除 操作以及操作后的刷新樹結(jié)構(gòu),具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2021-08-08