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

 更新时间:2018年03月09日 10:43:28   作者:LeachZhou   我要评论
下面小编就为大家分享一篇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 底部导航栏 一级路由显示 子路由不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VueJS 组件参数名命名与组件属性转化问题

    VueJS 组件参数名命名与组件属性转化问题

    这篇文章主要介绍了VueJS 组件参数名命名与组件属性转化问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • Vue触发式全局组件构建的方法

    Vue触发式全局组件构建的方法

    这篇文章主要介绍了Vue触发式全局组件构建的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue小白入门教程

    vue小白入门教程

    vue是一套用于构建用户界面的渐进式框架,本文通过实例给大家介绍了vue入门教程适用小白初学者,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • vue之浏览器存储方法封装实例

    vue之浏览器存储方法封装实例

    下面小编就为大家分享一篇vue之浏览器存储方法封装实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue.js实现刷新当前页面的方法教程

    vue.js实现刷新当前页面的方法教程

    这篇文章主要给大家介绍了关于vue.js实现刷新当前页面的方法教程,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • vue-cli与webpack处理静态资源的方法及webpack打包的坑

    vue-cli与webpack处理静态资源的方法及webpack打包的坑

    这篇文章主要介绍了vue-cli与webpack处理静态资源的方法,需要的朋友可以参考下
    2018-05-05
  • vue-cli项目修改文件热重载失效的解决方法

    vue-cli项目修改文件热重载失效的解决方法

    今天小编就为大家分享一篇vue-cli项目修改文件热重载失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 解决在vue项目中,发版之后,背景图片报错,路径不对的问题

    解决在vue项目中,发版之后,背景图片报错,路径不对的问题

    下面小编就为大家分享一篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • React和Vue中监听变量变化的方法

    React和Vue中监听变量变化的方法

    这篇文章主要介绍了React和Vue中监听变量变化的方法,本文通过一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state,具体内容详情大家跟随小编一起通过本文学习吧
    2018-11-11
  • Vue2.0 实现移动端图片上传功能

    Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件。具体实例大家大家参考下本文
    2018-05-05

最新评论