当前位置: 首页 > 编程笔记 >

vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法

韶镜
2023-03-14
本文向大家介绍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">

这是我找到的解决方案,之后根据这个修改了自己的代码,成功解决了。

以上这篇vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vue2.0 路由不显示router-view的解决方法,包括了vue2.0 路由不显示router-view的解决方法的使用技巧和注意事项,需要的朋友参考一下 今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的main.js,还有网上

  • 我使用的反应路由器dom版本5.0.1一个简单的反应应用程序,我使用了汇总捆绑,这是我的路由器组件 问题是,它只在localhost:8000/处显示主路由,但当我尝试访问localhost:8000/hello或localhost:8000/登录时,会出现此错误 这是我的rollup.config };

  • qiankun 微应用嵌套vue后,切换侧边栏路由,不显示页面。路由对应的matched和meta,都是空,有遇见这种情况的吗? 可以正常切换页面显示

  • 我有以下菜单 出于某种原因,当有三个项目时,标题就会出现。但是当有三个以上的项目时,最后一个标题就没有了。是不是因为底部的栏太小了?

  • 我想在我的项目中包括底部导航菜单,但它不起作用。底部导航菜单中没有显示菜单图标。我使用的是Android Studio北极狐。我做了所有正确的步骤,但仍然面临问题。这是我的代码,请帮我解决这个问题。谢谢。 主要活动Xml res\菜单\底部导航菜单 build.gradle 主题。xml

  • 我使用React路由器的SPA,但我不确定如何显示索引路由"/"上的一些内容。 我的顶级路由器配置只是: 顶层组件呈现页眉/页脚和其他公共元素: 子路由工作正常,它们在应用程序组件中呈现。但是,如何在根路径上呈现某些内容,使其不只是一个空白页面?