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


Posted in Javascript onMarch 09, 2018

最近利用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 底部导航栏 一级路由显示 子路由不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 对象中的类数组操作
Apr 27 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 #Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 #Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 #Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 #Javascript
详解react关于事件绑定this的四种方式
Mar 09 #Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 #Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
浅谈javascript的调试
2015/01/28 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python函数的5种参数详解
2017/02/24 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
python机器人行走步数问题的解决
2018/01/29 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python小进度条显示代码
2019/03/05 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
八一建军节演讲稿
2014/09/10 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
大学军训通讯稿
2015/07/18 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Python中Permission denied的解决方案
2021/04/02 Python