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 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
JS实现进度条动态加载特效
Mar 25 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
php json与xml序列化/反序列化
2013/10/28 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
在Django中创建第一个静态视图
2015/07/15 Python
Python中的集合类型知识讲解
2015/08/19 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
基于python 字符编码的理解
2017/09/02 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python实现类之间的方法互相调用
2018/04/29 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
关于调整工作时间的通知
2015/04/24 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
重阳节主题班会
2015/08/17 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python